Leaflet.Canvas-Layer

What

The continuation of Leaflet.Canvas-Markers leaflet for displaying markers on canvas instead of DOM. Working with Leaflet 1.0.0 and above. Feel free to contribute

New Features

• animated zoom for the canvas
• className property added to the canvas Layer, which allows to refer the canvas as an element of DOM to control its visibility, etc
• full L.divIcon support added
• custom canvas marker draw function added as userDrawFunc parameter of the Layer. The idea is taken from Leaflet.Canvas-Marker-Layer

/**
 * @param layer         the layer object
 * @param marker        current marker object
 * @param pointPos      current marker's pixel position
 * @param size          current marker's icon size
 */

var layer = L.canvasMarkerLayer({
  userDrawFunc: function(layer, marker, pointPos, size){
    var ctx = layer._context;
    ctx.beginPath();
    ctx.arc(pointPos.x, pointPos.y, size[0] / 2, 0, 2 * Math.PI);
    ctx.fillStyle = 'rgba(255,12,0,0.4)';
    ctx.fill();
    ctx.closePath();
  }
}).addTo(map);

Demo

There's a demo for 10000 points, running on Canvas

Demos of the new features coming soon...

Installation and basic usage

Just download leaflet.canvas-layer.js from the dist folder and attach it to your project.

<script src="leaflet.canvas-layer.js"></script>

Now attach layer to map and some markers.

// Adds a layer
var ciLayer = L.canvasLayer({}).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