Low performance while adding many circles to a leaflet map

Question

I'm having issues using Leaflet while trying to add a large set of points to a canvas rendered layer.

I'm creating +85.000 points using a code similar to the following one:

First I load a quadtree with all my points, a single point is a class with some other specific stuff, but regarding the leaflet stuff we have the following code:

var myCanvasRenderer = L.canvas({ paneName });

var geojsonMarkerOptions = { fillColor: "#AFC5CA", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.8, stroke: false, renderer: myCanvasRenderer, pane: paneName }

point.circle = L.circle(latlng, 0.5, myHandler.geojsonMarkerOptions);

Then the point is added to a quadtree. When the map is moved, I handle to event to draw the points inside the viewport, the point itself is drawn calling the following method:

circle.addTo(myLayer);

I've limited the drawing to 20.000 points. Stopping the process when this limit is reached and measured the time using console.Time

With the circle.addTo call, the process takes about 80 seconds to draw the 20.000 points. Commenting that call, the process takes about 8 seconds to "draw" the 20.000 points. ("draw" because not is really drawn)

All the points must be drawn, so solutions that involve clustering points are not an option.
I must have an handler to the drawn circle, because later in the application I need to show / hide some points or change their color

How can I speed up the drawing of the points? Is there anything similar to a "bulkAdd" method in the leaflet library?

Thanks in advance for your help

Hello ghybs, I've not tried that option because I'm already setting the canvas in the renderer property of the geojsonMarkerOptions that are passed to the circle. So, the circles are already drawn on a Canvas and not in a SVG renderer — Eduardo Poças

ghybs ghybs · Accepted Answer · 2017-07-14T04:35:50

What very probably happens is that your Circles are actually not drawn on your specified Canvas.

You can use your browser DOM inspector to check.

In Leaflet 1.x.x, the radius of the Circle is specified as radius option, instead of 2nd argument:

L.circle([50.5, 30.5], {radius: 200}).addTo(map);

Therefore in your code, the 2nd argument 0.5 has no effect, and your 3rd argument (myHandler.geojsonMarkerOptions) has no effect either, leading to not using your canvas.

Low performance while adding many circles to a leaflet map

1 Answers