Skip to content

mnikolaus/Leaflet.Canvas-Markers

 
 

Repository files navigation

Leaflet.Canvas-Markers

Leaflet plugin for displaying markers on canvas instead of DOM. Working with Leaflet 1.0.0 and above. Feel free to contribute

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 v66 & IE11. 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 <1 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.

Methods

  • addMarker(marker): Adds a marker to the layer.
  • addMarkers(markers): Adds a markers 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
  • addOnClickListener(eventHandler): Adds common click listener for all markers
  • addOnHoverListener(eventHandler): Adds a hover over listener for all markers

I also implemented binds for default addLayer, addLayers and removeLayer (equal to removeMarker(marker, true) methods.

Contributors

crzo, Spaction

About

Leaflet plugin for displaying icons on canvas instead of DOM

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%