Leaflet plugin for displaying markers on canvas instead of DOM. Working with Leaflet 1.0.0 and above.
There's a demo for 10000 points, running on Canvas
Installation and basic usage
leaflet.canvas-markers.js from the
dist folder and attach it to your project.
Now attach layer to map and some markers.
// Adds a layervar ciLayer = L;// Marker definitionvar marker = L;// Adding marker to layerciLayer;
Plugin was tested in Google Chrome v59. There is results for 100000 markers:
|Parameter||Default Leaflet Markers||Leaflet.Canvas-Markers|
|Memory used||up to 2.8 Gb||about 300 Mb|
|First load time||160-200 seconds||7 seconds|
|Zoom and move time||more than 3 minutes||0.5 seconds|
As you can see DOM operations are slow, so you should use canvas for a large number of markers.
You can also use L.circleMarker for your points with similar performance, but then you're limited to icon design.
- addMarker(marker): Adds a marker to the layer.
- removeMarker(marker, redraw): Removes a marker from the layer. Set redraw to
trueif you want to redraw layer after marker remove
- redraw(): Redraws the layer
I also implemented binds for default addLayer and removeLayer (equal to removeMarker(marker, true) methods.