Why is Leaflet so slow when you add a non-trivial amount of markers?

Question

My map is super fast and nice until I click my "houses for sale" layer, which adds less than 3,000 markers onto the map on its own L.layerGroup(). It really makes it difficult to zoom in/out and pan around. It's virtually unusable in this state. The second I click the layer away, it's again super fast. It's doubtlessly caused by the markers being rendered.

Why would less than 3,000 markers even make it go slower at all? Even a computer from the 1980s would be able to display such a small amount of markers on a map, no? And more importantly: how to fix it?

Answer 1

It's just how Leaflet handles it. I'm not sure exactly, but perhaps it's because rendering is done on a single thread on the CPU? Not sure the specific reason, but if it was easy to fix it would have been fixed!

You can handle hundreds of thousands of points if you use the MarkerCluster plugin.

Or alternatively, you can load your data into Carto or MapBox and do it slightly differently. (They do server-side rendering of images, and provide a fast way to to interaction using UTF Grids.)

The third way of solving it is using MapBox GL (I think, I haven't tried this). I reckon MapBox GL will enable you to display a lot of points, and you then just need to work out how to transfer bulk data! But 3,000 points isn't a lot of data, so you would probably be fine.