Performance problem with big amounts of LCircleMarker

[digEmAll]

In our application we have a vue-leaflet map where we show groups of circle markers according to the current zoom level.

When the number of markers is relatively low, say 100 per group, the transition between each zoom level is quite smooth.

The problem arises when the number grows (depending on your computer speed): application starts to freeze for 1-2 or more seconds and only after some time, the circles appear.

I have attached a code-sandbox reproducing the issue (it's basically a stripped down version of our real application).

https://codesandbox.io/s/leaflet-circles-test-h4z2h

In this sandbox, there's a component MyMap receiving the list of groups, each containing the list of circles to be rendered.
Each group can be shown when current zoom is inside a specific range (specified by group object properties min/maxZoom).
In the sandbox there are 3 groups:

• countries (green circles)
• regions (yellow circles)
• provinces (provinces)
  containing circles randomly positioned around the map center "Rome"

If you increase the "Number of circles per group" to, say, 1000 or more and press APPLY, you will see a big performance degradation (more in Firefox than Chrome).

Any idea how to solve this (and what is the cause ?)

Notes:

• preferCanvas is ON
• I know of MarkerCluster plugin, but I'd prefer to stick on base vue-leaflet, unless there's no other solution

Browsers Affected

• Chrome
• Firefox

Versions

• Leaflet: v1.8.0
• Vue: v2.6.14
• Vue2Leaflet: v2.7.1

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.