How to render huge GeoJSON datasets on a map (part 2).
This is part #2 in a series of examples showing how to handle rendering of large GeoJSON datasets on an interactive web map (+100Mb).
Part #1 introduced a bunch of tools from vis.gl (https://vis.gl/frameworks), namely DeckGL. The downside of this approach is that it relies on MapBox GL for the interactive map part — which since v2 is no longer Open Source. If OSS is important for your project, MapBoxGL might not be the best option.
Fortunately — earcut, which is the library under the hood which does polygon geometry triangulation for WebGL is still OpenSource (thanks again MapBox 🙏).
I often use LeafletJS in my projects, so first thing I did was go off and write a demo combining earcut triangulation with leaflet using a canvas overlay. After some success rendering polygons based on other examples — I did one last search for an existing leaflet plugin before I reinvented the wheel… and I found Leaflet.glify (GL-ify)!
Leaflet.glify is a very powerful plugin, but does have some downsides.
To address these issues I setup a peer leaflet plugin called Leaflet.glify.layer, which may be used as-is, plus it might serve as an example of how the core Leaflet.glify plugin might be improved upon in future.
The aim is to combine high-performance rendering with the conveniences provided by Leaflets native L.geoJSON layer.
TLDR; check out: https://github.com/onaci/Leaflet.glify.layer
Update:
I’ve also setup an example of how to do this in Python (similar to PyDeck) via a plugin for the Folium library, see:
- Github repo: https://github.com/onaci/folium-glify-layer
- Jupyter Notebook via Pangeo’s Binder: https://binder.pangeo.io/v2/gh/onaci/folium-glify-layer/main
