Closed pr0ph0z closed 4 years ago
@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
@DonNicoJs I see no difference here https://jsfiddle.net/j9dgcnp8/. The map still using <div>
tag, not <canvas>
.
@pr0ph0z https://leafletjs.com/reference-1.5.0.html#map-prefercanvas preferCanvas is only for paths
not markers
@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.
@pr0ph0z Yes you may look into: https://github.com/eJuke/Leaflet.Canvas-Markers and see if it helps
@DonNicoJs Thank you for the reference and the advice!
How can I do this in vue 3 ?? @pr0ph0z my browser lags when loading 1000++ markers
@0neCigarettes nah mate I didn't do anything. I think the easiest solution is to use the markercluster plugin
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
Versions