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

Here’s what it looks like so far (also: demo):

Got a better way? Let me know!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store