Skip to content
This repository has been archived by the owner on Nov 19, 2018. It is now read-only.

eJuke/Leaflet.Canvas-Markers

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

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