Leaflet Performance – Resolve Map Freeze When Loading Large Shapefile Data on Leaflet

javascriptleafletperformanceshapefile

I am currently using Leaflet shapfile as a source of my data.

When the shapefile [30MB] contains 1 big layer (Feature is big with many coordinates | A whole big polygon), the UI still working but loads very long.

When the shapefile [20MB] contains multiple layers (Many Polylines, Polygons markers | Multiple Features), the UI already freezes upon load.

Is there any work around on this like load only what is visible on the map view port so performance issue will be addressed? Is this possible?

Map with shapefile:

Best Answer

It seems that there is no direct way to speed up leaflet rendering. Its just too difficult for the browser to render dozens of thousands of objects. There are some ways to improve performance though:

  1. Enable canvas rendering by setting preferCanvas to true (link to docs). People say it speeds up polylines rendering comparing to the default SVG renderer.
  2. Use some clustering plugins for markers, like this one. Usually there is no point in rendering thousand of markers at the same time on screen - they will form a mess where it is hard to see anything, and will slow down browser, especially if you use different images that need to be fetched.
  3. Provide different sets of data for different zoom levels. For small levels you can simplify geometries and throw away objects that are too small to be seen on this zoom level anyway (but will still contribute to network and performance consumption)
  4. Load only objects in viewport. Either by writing your own solution (e.g. an endpoint that gets leaflet viewport bounding box and returns objects within it) or incorporating some existing solutions. E.g. Mapbox Vector Tiles format - there are both leaflet plugins for it and backend libraries for many languages that support packing geometries in this format.
  5. Use some software to render you set of geometries into raster XYZ tiles format. There are pretty many solutions that can turn a shapefile into a set of png rasters (e.g. QGIS can do that). Raster tiles are very fast, but you will need to add some logic if you want to interact with your features in the browser. In this case browser will have no vector data to show any tooltip or info over your features. You will need to implement a request to your server like "give me the features in this point where user has clicked".
Related Question