Menu
I need to draw thousands of points on a leaflet map with custom icons. The performance using the standard L.marker is too slow to be usable when I get to around 1500 markers. I attempted the solution here using L.circleMarker, and I am able to draw thousands of points with stellar performance. Unforunately, with using L.circleMarker I am only able to make different kinds of circles, which does not satisfy my requirements. I am also not able to leverage clustering, since there isn't a particularly good way to cluster these unrelated markers with different icons.
Is there a way to get the performance benefits of canvas rendering while being able to use custom icons?
501
To make a custom icon, we usually need two images — the actual icon image and the image of its shadow. For this tutorial, we took the Leaflet logo and created four images out of it — 3 leaf images of different colors and one shadow image for the three: Note that the white area in the images is actually transparent.
Creating an icon. Marker icons in Leaflet are defined by L.Icon objects, which are passed as an option when creating markers. Let’s create a green leaf icon: var greenIcon = L.icon({ iconUrl: 'leaf-green.png', shadowUrl: 'leaf-shadow.png', iconSize: [38, 95], // size of the icon shadowSize: [50, 64],...
For this tutorial, we took the Leaflet logo and created four images out of it — 3 leaf images of different colors and one shadow image for the three: Note that the white area in the images is actually transparent.
Using inline SVG elements as icons for Leaflet markers, gives us a lot of flexibility when it comes to styling. We covered a few applications in this tutorial.
Hi there use this node pakage, https://www.npmjs.com/package/leaflet-canvas-markers
By default, leaflet markers are added as individual DOM elements in our html page which is very hard to handel this much doms.
But this module use html canvas tag to plot markers on map.
Here is my canvas example for 10000 markers, the performnce is amazing but i did't use this package. But i will implement this in my project soon. This time i implemented canvas in some other way.
Demo -> https://parveen-sishodiya-git.github.io/on-demand-leaflet-markers/
73
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
