Rendering huge GeoJSON data using leaflet
Huge GeoJSON data may cause browser to crash, this is because of its limitations.
Let's say you have a 100+ MB file, displaying it on the map without map server will cause a lag or unresponsive browser.
In order to address this issue, you can reduce the GeoJSON file size by simplifying its vertices using mapshaper (or using QGIS or any desktop GIS software) and converting it in TopoJSON.
TopoJSON is an extension of GeoJSON that encodes topology. Rather than representing geometries discretely, geometries in TopoJSON files are stitched together from shared line segments called arcs. This technique is similar to Matt Bloch’s MapShaper and the Arc/Info Export format, .e00.
This will significantly reduce the file size, I have tried a 100+ MB file it reduces to 30+ MB.
After the conversion, we'll be using a parser and rendering plugin for leaflet. Let's use leaflet-omnivore from mapbox in parsing TopoJSON and convert it to GeoJSON, then use Leaflet.VectorGrid.
Here's a code snippet of its implementation:
You need to include the JavaScript files of leaflet-omnivore and leaflet-vectorgrid in your html file.
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>
<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
Comments
Post a Comment
Feel free to ask, suggest and comment regarding this post/blog. You can also contact me through e-mail, just always use the contact page. Thank you for visiting this blog.