Skip to content

aparshin/leaflet-boundary-canvas

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 

Repository files navigation

BoundaryCanvas is a plugin for Leaflet 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

Usage

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:

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

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);

About

Leaflet plugin to draw raster layers with arbitrary boundary

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published