What is the recommandation to display a large amount of markers (around 100) on a leaflet Map? Is it better to display markers using a PNG image or a base64 image for the marker icon?
I didn't find anything in the leaflet Doc:
3
votes
Base64 is not an image format, it's an encoding for an image format.
– tadman
Yes that's right, but both solutions are available, so i would like to select the good one
– wawanopoulos
"Good" is hugely subjective. Try both and see what works best for your particular situation. With something like Webpack involved this is often a moot point.
– tadman
1 Answers
3
votes
You are wondering what makes a difference between using an external image file for your Leaflet Marker icons, and an inlined base64 encoded image.
When using a separate file, browsers are optimized to cache the data.
When your image data is inlined, it might prevent such optimisation, and we can see browser performance degrading. See Leaflet issue #4968 performance analysis:
When loading a lot of markers (1000, in my case), the performance is noticably worse for base64 inlined images.
[...] for some reason the layer composition is delayed when using inlined images, which makes the whole load take roughly a second longer.
For casual use, this probably doesn't matter, but if you use a lot of markers, this might be relevant.
Note that as soon as you try displaying more than a few hundred Markers anyway, you should consider using clustering or single canvas-based Markers / icons.
