Use custom icons with canvas rendering leaflet

Question

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?

Answer 1

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/

Answer 2

After spending a few hours looking into this I've come to the conclusion that leaflet doesn't have native support for creating custom icons with canvas.

There is a plugin though called leaflet-canvasicon that adds the functionality though.

I haven't tested it yet but the example looks pretty good.

https://github.com/sashakavun/leaflet-canvasicon

Answer 3

I was able to use CircleMarkers and MarkerCluster, but I had to create a custom CircleMarker class like it says here:https://github.com/Leaflet/Leaflet/issues/6257

Answer 4

I made a plugin to render markers on a canvas: https://github.com/francoisromain/leaflet-markers-canvas

You can use it with custom markers.

Answer 5

You can use https://www.npmjs.com/package/leaflet-canvas-markers Adding all images to just one canvas. And you can create a direction arrow by simply pointing to the previous waypoint!