Plotting 140K points in leafletjs

Question

I'm new to leafletjs. Been working on cesiumjs for a while and we are trying leaflet now. The main reason for the switch is to see if there's a huge performance difference.

In Cesium, I had a collection of primitive points that I plotted. What's the most efficient way of plotting 140K points in leafletjs? Using markers or creating individual little circles?

I am also thinking of using the clustering plugin (http://leafletjs.com/2012/08/20/guest-post-markerclusterer-0-1-released.html), so please share any thoughts on performance.

Indonesia

Answer 1

You have 2 common options:

• Display your points in a Canvas-based layer, like using Circle Markers and force rendering them on a Canvas instead of SVG (see also Leaflet MaskCanvas plugin). Circle Markers, even on a canvas, still emit events, so you can detect "click" etc.

• Use a clustering plugin, like Leaflet.markercluster plugin that you mention for exampe. It can handle your 140k points, depending on the client's computer performance (see https://github.com/Leaflet/Leaflet.markercluster#handling-lots-of-markers and demo http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.50000.html with 50k points, but note that the demo uses an old version of the plugin, whereas the current version is even faster).

Trying to display your 140k points without Canvas or clustering will crash your browser for sure.

Haukom

Thank you...I'll have to study the clustering. I wonder if I can cluster based on an attribute. So in our case the 140K points could consist of 1/12 different species. I would want the clusters to be by species. I haven't digged into the clustering code but let me know if that's obviously not possible – Indonesia

Well, it all depends on what you mean by "cluster by species"… Obviously you can make as many clusterGroups as species, but clusters of different species may overlap. Feel free to open a new question if you need further help. – Haukom

For anyone looking for an alternative to the first option given in this answer, try this: #43016354 It doesn't work with as much as 140K dots, but it is ok with about 20K dots, which will kill the browser with regular markers. This alternative uses CircleMarkers. – Elementary

Answer 2

If you want to render more than 100k markers, you can use Supercluster library, because Leaflet.markercluster loading of >100k markers could take more than 30 seconds.

I created a github repo to compare initial loading of Leaflet.markercluster and Supercluster.

Battleax

The data for MCG is very far from the demo on the repo. Without seeing the code that has been used, we can only assume it has been setup incorrectly. See also measurements in Leaflet.makercluster #584. – Haukom

It's true that code from research paper is not provided, but we cannot assume anything because the demo on the repo and the measurement you linked has only 50k markers. Soon, I will have data with 100k, 200k and 500k markers. I will post my result here in this thread. – Battleax

I mean the measurements for 50k in the table you show is far away from what you can experience in the 50k demo already. If there is so much gap, it is suspicious how the test was setup. – Haukom

@Haukom you are right, they needed to do something wrong because I tried it out and Leaflet.markercluster is able to render >100k markers. However, initial loading of Leaflet.markercluster is too slow. I edited my answer and created a github repo which you can use to compare performance of both libraries locally. – Battleax