cgps-leaflet-canvas-marker
v1.0.0
Published
Leaflet plugin to display icons on canvas instead of DOM
Downloads
5
Readme
Leaflet.Canvas-Markers
Leaflet plugin for displaying markers on canvas instead of DOM. Working with Leaflet 1.0.0 and above.
Demo
There's a demo for 10000 points, running on Canvas
Installation and basic usage
Just download leaflet.canvas-markers.js
from the dist
folder and attach it to your project.
<script src="leaflet.canvas-markers.js"></script>
Now attach layer to map and some markers.
// Adds a layer
var ciLayer = L.canvasIconLayer({}).addTo(map);
// Marker definition
var marker = L.marker([58.5578, 29.0087], {icon: icon});
// Adding marker to layer
ciLayer.addMarker(marker);
Benchmark
Plugin was tested in Google Chrome v59. There is results for 100000 markers:
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.
Methods
- addMarker(marker): Adds a marker to the layer.
- removeMarker(marker, redraw): Removes a marker from the layer. Set redraw to
true
if 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.