1

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:

2
  • 1
    do you really need to load all the features into the browser? consider using a WMS server to provide an image of the data more efficiently
    – Ian Turton
    Apr 8, 2020 at 7:52
  • Unfortunately, these shape files are imported as zip files and saved to some file storage services. We just extracted these shape files and convert to an array buffer. Conversions are already handled using worker, so no problem on the performance on there, but problem occurs during rendering of these Features. Apr 8, 2020 at 9:06

3 Answers 3

3

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".
1
  • Thank you so much @Jedi-Philosopher ! Setting preferCanvas to true is a life saver! Before, our map with 50 megabytes of polygons led to a freezing map whenever we tried to zoom or pan. Our application became unusable. With this simple option, our map can be used fluently again and the delayed rendering is not a problem at all. Will try your other suggestions in the next days!
    – Paul
    Sep 19, 2021 at 19:20
1

Leaflet VectorGrid offers outstanding performance. I use it to render 100.000 5 point polygons without issue.

https://github.com/Leaflet/Leaflet.VectorGrid

Note that it requires the data to be in geo/topJson

Best regards

0

GeoJSON-VT is great solution to add to Leaflet as it creates JSON vector Tiles but really any big data use Protocol Buffer Format (PBF) vector tiles use Tippecanoe, Ogr2Ogr, Python or ArcGIS Pro VTPK and then convert VTPK to mbtiles with a command line tool. Install 2 plugins for leaflet one for rendering vector tiles and one for GL JSON Styling.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.