Leaflet: Poor performance with many markers

[zdila]

• [x] I'm reporting a bug, not asking for help; support questions like "How can I do X with Leaflet?" will be closed (use Stack Overflow or gis.stackexchange.com for questions)
• [x] I've looked at the documentation to make sure the behaviour is documented and expected
• [x] I'm sure this is a Leaflet code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
• [x] I've searched through the issues to make sure it's not yet reported

How to reproduce

• Leaflet version I'm using: 1.3.4
• Browser (with version) I'm using: Chromium 68
• OS/Platform (with version) I'm using: Debian Buster
• Place many markers to the map (eg. 1000)
• Move or zoom the map

What behaviour I'm expecting and which behaviour I'm seeing

Start of the movement is delayed and eats 100% of the CPU core. The same for the zoom. Delay si caused by getBoundingClientRect:

Minimal example reproducing the issue

• [x] this example is as simple as possible
• [x] this example does not rely on any third party code

https://codepen.io/zdila/pen/YOwoEd

[ghybs]

Hi @zdila,

Unfortunately that is a known limitation of Leaflet.
See https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740

Leaflet uses regular DOM Elements for standard Markers.
This simplicity has a drawback: browsers struggle handling thousands of them.

For the common usage (a few Markers), the simplicity is advantageous.

For more complex use case, the workaround is to switch to canvas.
There should be some plugins that provide other canvas-based markers, should you need something fancier than Circle Markers.

[manubb]

If you need to draw many markers, you can try Leaflet.PixiOverlay plugin.
(i'm the plugin author by the way)

[zdila]

@ghybs thanks for the explanation. I just wonder if calling getBoundingClientRect is really necessary and what is it used for in Leaflet.

@manubb thanks for the info. We already use canvas for displaying picture positions on the map: https://www.freemap.sk/?map=9/48.821333/20.126953&layers=TI