Eduardo Poças
Eduardo Poças

Reputation: 19

Low performance while adding many circles to a leaflet map

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)

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

Upvotes: 1

Views: 1177

Answers (1)

ghybs
ghybs

Reputation: 53280

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.

Upvotes: 1

Related Questions