Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Leaflet plugin to draw raster layers with arbitrary boundary
HTML JavaScript
Latest commit 3863524 @aparshin Fixed misprint
Failed to load latest commit information.
examples Add support of GeoJSON as a boundary. Fixes #9.
src Don't clip tiles if boundary is not defined Fixed misprint

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.



var osm = new L.TileLayer.BoundaryCanvas(tileLayerUrl, options);


  • tileLayerUrl - URL similar to L.TileLayer
  • options - all L.TileLayer options and additional options described below.


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.

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


  • 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 ='map').setView([55.7, 38], 7),
    osmUrl = 'http://{s}{z}/{x}/{y}.png',
    osmAttribution = 'Map data © 2012 OpenStreetMap contributors';

var osm = L.TileLayer.boundaryCanvas(osmUrl, {
    boundary: latLngGeom, 
    attribution: osmAttribution
Something went wrong with that request. Please try again.