Performance Issue When Map Loads Large Datasets

[pr0ph0z]

Description

Hi there, I have a case where I have to add about 5000 markers and I got performance issue that my browser is lagging. I got the explanation here but when I look into Vue2Leaflet source code and there's nothing about canvas. Is there any tips or ways I can do to solve this issue (without not using Vue2Leaflet of course)?

Live Demo

I set the default to 500 markers, you can increment the value sequentially (100,0 2000, 5000) https://jsfiddle.net/xhdk3o7f/1/

Browsers Affected

• [x] Chrome
• [ ] Firefox
• [ ] Edge
• [ ] Safari 9
• [ ] Safari 8
• [ ] IE 11

Versions

• Leaflet: v1.5.1
• Vue: v2.6.10
• Vue2Leaflet: v2.1.1

[DonNicoJs]

@pr0ph0z If you want to use canvas, just pass an option to the map: <l-map :options="{preferCanvas: true}"></l-map> In my experience with lots of marker you also need to be careful to use only 1 tooltip / popup and 'update it' with the marker data when shown.

Also if is an option you can consider markercluster plugin

[pr0ph0z]

@DonNicoJs I see no difference here https://jsfiddle.net/j9dgcnp8/. The map still using <div> tag, not <canvas>.

[DonNicoJs]

@pr0ph0z https://leafletjs.com/reference-1.5.0.html#map-prefercanvas preferCanvas is only for paths not markers

[pr0ph0z]

@DonNicoJs so I have to use render marker as canvas right? How can I do that in Vue2Leaflet?

Anyway I had already tried markercluster plugin. It's nice but I will use it when I can't make this work.

[DonNicoJs]

@pr0ph0z Yes you may look into: https://github.com/eJuke/Leaflet.Canvas-Markers and see if it helps

[pr0ph0z]

@DonNicoJs Thank you for the reference and the advice!

[0neCigarettes]

How can I do this in vue 3 ?? @pr0ph0z my browser lags when loading 1000++ markers

[pr0ph0z]

@0neCigarettes nah mate I didn't do anything. I think the easiest solution is to use the markercluster plugin