# leaflet-boundary-canvas

> A fullscreen control for Leaflet

Latest version **1.0.0** (published 2016-12-18) · MIT License license · 0 weekly downloads

## Install

```sh
npm install leaflet-boundary-canvas
pnpm add leaflet-boundary-canvas
yarn add leaflet-boundary-canvas
bun add leaflet-boundary-canvas
```

## Health

**Score 18/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2016-12-18 |
| First published | 2016-12-18 |
| Weekly downloads | 0 |
| License | MIT License |
| TypeScript types | separate (@types/leaflet-boundary-canvas) |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Truong Thanh TUng |
| Maintainers | ttungbmt |
| Keywords | leaflet, maps, boundary canvas, client |

## Links

- npm: https://www.npmjs.com/package/leaflet-boundary-canvas
- Repository: https://github.com/ttungbmt/leaflet-boundary-canvas
- Homepage: https://github.com/ttungbmt/leaflet-boundary-canvas#readme
- Issues: https://github.com/ttungbmt/leaflet-boundary-canvas/issues
- npm.io page: https://npm.io/package/leaflet-boundary-canvas

## Alternatives

- [launchdarkly-js-client-sdk](https://npm.io/package/launchdarkly-js-client-sdk.md) — 2.5M weekly downloads
- [@elastic/elasticsearch](https://npm.io/package/@elastic/elasticsearch.md) — 2.1M weekly downloads
- [@c8y/client](https://npm.io/package/@c8y/client.md) — 15.3K weekly downloads
- [@signaldb/maverickjs](https://npm.io/package/@signaldb/maverickjs.md) — 1.7K weekly downloads
- [@bbc/http-transport-cache](https://npm.io/package/@bbc/http-transport-cache.md) — 1.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2016-12-18

## README

BoundaryCanvas is a plugin for [Leaflet](http://leaflet.cloudmade.com/) mapping library to draw tiled raster layers with arbitrary boundary.
HTML5 Canvas is used for rendering. Works with both Leaflet 0.7.x and 1.0beta versions.

## Demos

* [Draw boundary of a raster layer yourself](http://aparshin.github.com/leaflet-boundary-canvas/examples/canvas-boundary-edit.html)
* [Add boundary to popular base layers](http://aparshin.github.com/leaflet-boundary-canvas/examples/canvas-boundary-providers.html)
* [A multipolygon with holes as a border](http://aparshin.github.com/leaflet-boundary-canvas/examples/canvas-boundary.html)

## Usage

```javascript
var osm = new L.TileLayer.BoundaryCanvas(tileLayerUrl, options);
map.addLayer(osm);
```

where
 * `tileLayerUrl` - URL similar to `L.TileLayer`
 * `options` - all `L.TileLayer` options and additional options described below.

## Options
 
`boundary` option can be
 * GeoJSON object (only `Polygon` and `MultiPolygon` geometries will be used)
 * `LatLng[]` - simple polygon (depricated)
 * `LatLng[][]` - polygon with holes (depricated)
 * `LatLng[][][]` - multipolygon (depricated)

All rings of boundary should be without self-intersections or intersections with other rings. Zero-winding fill algorithm is used in HTML5 Canvas, so holes should have opposite direction to exterior ring.

`crossOrigin` option (Boolean) should be set if you want to request CORS enabled images. It is not required for the plugin itself, but can be usefull for potential plugin extensions.

`trackAttribution` option (Boolean) can be set to show layer's attribution only when map boundary intersects layer's geometry. Additional calculations are required after each map movement (critical for complex boundaries).

## Contruction from Other Layers

There is a helper function to construct `L.TileLayer.BoundaryCanvas` based on already created `L.TileLayer` layer:

```javascript
var boundaryLayer = L.TileLayer.BoundaryCanvas.createFromLayer(tileLayer, options);
```

where
 * `tileLayer` - instance of `L.TileLayer`
 * `options` - `L.TileLayer.BoundaryCanvas` options (including `boundary`)
 
This helper returns new `L.TileLayer.BoundaryCanvas` layer. It is based only on options of original layer and doesn't work for all the `L.TileLayer` descendant classes.

## Code Example

```javascript
var latLngGeom = ...; //Define real geometry here
var map = L.map('map').setView([55.7, 38], 7),
    osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    osmAttribution = 'Map data © 2012 OpenStreetMap contributors';

var osm = L.TileLayer.boundaryCanvas(osmUrl, {
    boundary: latLngGeom, 
    attribution: osmAttribution
}).addTo(map);
```

---
_Source: https://npm.io/package/leaflet-boundary-canvas · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._