Large scale performance of Circle VS GeoJSON

[Charles Richardson]

Hello Leaflet community,

I have been building an application that requires around ten thousand 'points' to be drawn on the map, each one having a unique popup with information associated to the feature. 

I originally designed the map to overlay Circle components with a Popup child within each one (using React-Leaflet), but after having some performance issues, I tried implementing the GeoJson component, as it seemed to be a more efficient method of implementing, per the docs.

After spending about a day converting the data to GeoJson, modifying the state stores, and replacing the Circle mapper with a GeoJson component, I was disappointed to see it perform worse than the Circle overlays. 

I would like to implement the most performant solution to render thousands of points on the map, and seek some expert feedback on the best layer type to use and any supplemental strategies that would enable a better UX. 

Thank you in advance!

Charles

[Ian Mayo]

Hello Charles,

when faced with your problem we adopted clustered markers.  The leaflet.markercluster library offers amazing performance.

Here is an example running 10k markers: 

https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.10000.html

Here is the repo:

https://github.com/Leaflet/Leaflet.markercluster

Note: we're using react-leaflet, so we actually used this wrapper library:

https://github.com/akursat/react-leaflet-cluster

Best of luck,

Ian

[Charles Richardson]

Hi Ian,

Thank you for the tip. Our use case is trying to show all 10k points at once, so I am looking for the most efficient tool for the job. When I was using the circle vector layer, it took a while to load on the screen, but it seems that GeoJson takes double to triple as long to finish rendering and painting.

I am wondering if this is by design; are vector layers typically better than geojson layers in terms of performance? Is there something faster? I am well aware that performance is degraded by displaying 10k points to the screen, so my goal is to minimize it by using the lightest components I can, that still allow an onClick Popup interaction.

Again, thank you.

Charles

[Ian Mayo]

We started off by showing all markers (about 3k of them, I think).  But, they were too dense for users to be able to deliberately click on a marker they were interested in.  It was only possible to click on a particular icon once the user had zoomed in so far that only about (say) 500 were visible.  So, we used clustering by default, switching it off when only 500 were visible in the current viewport,   So, users had high-performing clustered view when zoomed out, with all icons being shown once the user had zoomed in on a particular area.

Back to your question.  I do recall that GeoJson renderer includes custom render/format functions. Could it be that the default implementation of one of these is inefficient?

Regards,

Ian

[Charles Richardson]

Wow! You are right. The default implementation of 

pointToLayer: (geoJsonPoint, latlng) { return L.marker(latlng); }

was severely impacting the rendering and painting times. Once I changed it to

pointToLayer: (geoJsonPoint, latlng) { return L.circle(latlng, ...); }
the performance improved dramatically. 

I do not have definite measures, but it looks like this implementation is even faster than using the circle element independently outside of a GeoJSON wrapper!

Thank you Ian

Charles

[Ian Mayo]

It's a pleasure Charles.

Regards,

Ian

[Charles Richardson]

Hey Ian, 

Hope you are doing well. 

I was curious to discuss, and potentially plan, a new plugin to Leaflet that would allow me to cluster polygons. Our use case does not need to cluster markers, but we have polygons on the map that would be much more user friendly if they were clustered and/or visualized differently at a very small zoom level (when they are small), such that the user can interact with them easier.

As it seems you have some experience in the space of clustering for performance, I was curious if you had any insights into where I could begin with this process, as well as if you would like to work together to build an open-source polygon clustering plugin for leaflet.

I have about 8 months of experience working with leaflet, mostly on the React side of things, but I would like to get involved in an open source library that would be of value to the company I work for as well as the community, which seems to have some demand for this. 

An alternative approach would be to make a PR to the leaflet-markercluster library with added polygon support, and then a subsequent PR to the react-leaflet-cluster library, which wraps the base markercluster library to begin with. This approach would prevent additional dependencies for users, but would likely require some longer discussions about getting those PRs approved. 

This is a handful, but i would love to make it happen. I will probably start working on it at some point if it is not addressed, but as of now, I am just too inexperienced to start the project without spending too much time on it myself.

Additionally, if you do not have time to work on this yourself, but like the idea, let me know and I will make it a novel conversation in the forum.

Thanks!

Charles Richardson