https://github.com/domoritz/leaflet-maskcanvas

A leaflet canvas layer for displaying large coverage data sets
https://github.com/domoritz/leaflet-maskcanvas

Last synced: 10 days ago
JSON representation

A leaflet canvas layer for displaying large coverage data sets

• Host: GitHub
• URL: https://github.com/domoritz/leaflet-maskcanvas
• Owner: domoritz
• License: mit
• Created: 2012-11-11T15:14:46.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2021-06-21T05:16:50.000Z (over 3 years ago)
• Last Synced: 2024-10-16T01:21:15.260Z (25 days ago)
• Language: JavaScript
• Size: 1.69 MB
• Stars: 196
• Watchers: 14
• Forks: 46
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Leaflet MaskCanvas

[![npm version](https://img.shields.io/npm/v/leaflet-maskcanvas.svg)](https://www.npmjs.com/package/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](https://en.wikipedia.org/wiki/Quadtree) that is used internally

* Custom color and circle size

## Demo

Check out the demo at https://domoritz.github.io/vbb-coverage/.

## Set up

### NPM

```

npm install leaflet-maskcanvas

```

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

### Script

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

```html

```

### Bower

`bower install leaflet.maskcanvas`

## Usage

#### Initialize the maskCanvas layer

```javascript

L.TileLayer.maskCanvas();

```

#### Set the dataset for the layer.

```javascript

layer.setData(data);

```

#### Finally add the layer to the map.

```javascript

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](http://leafletjs.com/reference.html#tilelayer-options) which can be passed to `L.TileLayer.maskCanvas`. You probably want to set the layer opacity.

Other possible options:

```javascript

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

});

```

## Screenshot

![screenshot](https://raw.github.com/domoritz/leaflet-maskcanvas/master/screenshot.png "Screenshot showing mask canvas layer")

## Developers

Run the demo locally with `python -m SimpleHTTPServer` and then open http://0.0.0.0:8000/demo.

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.

## 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.