A leaflet canvas layer for displaying large coverage data sets
Switch branches/tags
Nothing to show
Clone or download
Latest commit db8deb9 May 31, 2018


Leaflet MaskCanvas

npm version

A leaflet canvas layer for displaying large coverage data sets.


  • Canvas tile layer based
  • High performance even for large dataset because of the QuadTree that is used internally
  • Custom color and circle size


Check out the demo at http://domoritz.github.com/vbb-coverage/.

Set up


npm install leaflet-maskcanvas

This library depends on leaflet >= 1.0, you can install it separately with npm i leaflet


Clone or download the repository and use the files in src/ directly

<script src="QuadTree.js"></script>
<script src="L.TileLayer.MaskCanvas.js"></script>


bower install leaflet.maskcanvas


Initialize the maskCanvas layer


Set the dataset for the layer.


Finally add the layer to the map.


The data format is a simple array of [lat, lng] pairs. For example [[51.50,-0.28],[51.51,-0.07],[51.51,-0.07],[51.54,-0.29]]. I recommend that you load the data set asynchronously in order to keep the page responsive. Once the data is loaded, you can add it to the layer and display it.

Possible options

The MaskCanvas layer supports all Leaflet canvas layer options which can be passed to L.TileLayer.maskCanvas. You probably want to set the layer opacity.

Other possible options:

var layer = L.TileLayer.maskCanvas({
       radius: 5,  // radius in pixels or in meters (see useAbsoluteRadius)
       useAbsoluteRadius: true,  // true: r in meters, false: r in pixels
       color: '#000',  // the color of the layer
       opacity: 0.5,  // opacity of the not covered area
       noMask: false,  // true results in normal (filled) circled, instead masked circles
       lineColor: '#A00'   // color of the circle outline if noMask is true




Run the demo locally with python -m SimpleHTTPServer and then open If you don't have python, but only npm you can also use npx http-server -p 8000 and go to http://localhost:8000/demo.


The QuadTree implementation comes from https://github.com/jsmarkus/ExamplesByMesh/tree/master/JavaScript/QuadTree and has been slightly modified. Original Implementation by Mike Chambers.