gijs / leaflet-maskcanvas Goto Github PK

#Leaflet MaskCanvas

A leaflet canvas layer for displaying large coverage data sets.

Features:

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

Demo

Not yet available.

##Usage

Set up

• Add the MaskCanvas and Quadtree libraries.

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

• Initialize the maskCanvas layer

L.TileLayer.maskCanvas();

• Set the dataset for the layer.

layer.setData(data);

• Finally add the layer to the map.

map.addLayer(layer);

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 of a masked circle around a data point
       color: '#000'  // the color of the layer
});

Screenshot

Acknowledgement

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