2

I'd like to implement a map with large amounts of data e.g. https://openlayers.org/en/latest/examples/geojson.html or http://leafletjs.com/examples/quick-start/

While zoomed out at 100%, the map would need to display around 50000 markers or circles in total which will get dynamically updated (every 1-5 minutes). Depending on user set up, circles/markers may have different colours etc.

While zoomed in, the requirement is to display around 1000 small images (in places where the circles/markers used to be).

How do I handle such a massive amount of dynamic data within maps? For example, if I use little circles within Leaflet, I can see it handling over 1000 of them without bigger issues while zooming in and out, but the browser starts to struggle with over ~5000 which is probably expected since the browser needs to process lots of data points. I expect OpenLayers to have same issues as well.

Any thoughts?

Arunas
  • 328
  • 1
  • 14
  • It's not exactly the same question but it's quite the same domain "vector performance comparaison between Leaflet and OpenLayers". Not a duplicate but it can show you that Leaflet "seems" to be faster with larger datas: https://stackoverflow.com/questions/38997746/performance-test-openlayers-vs-leaflet/41852681#41852681 – KBill Mar 26 '19 at 20:33

1 Answers1

1

You need to use canvas renderer with L.canvas. You can either set map option preferCanvas to true or create renderer with L.canvas and bind it to feature layer with renderer option. So it will be something like this:

L.geoJson(null,{renderer:L.canvas()});

Also I recommend you to add features in parts, even if renderer can handle this amount of data, it's still will be long operation to render this at one time. You can split data and use timeout instead.

If you need some custom design points you can also extend this class, with new feature types.

With this technique, I was able to render more than 60000 markers with no lags.

Kesavamoorthi
  • 959
  • 2
  • 11
  • 21
Anton Stepanenkov
  • 1,026
  • 8
  • 15