leaflet-tilelayer-mask (v1.0)

Leaflet 1.0.x plugin, Leaflet-tilelayer-mask adds mask effect to tilelayer. Older version for Leaflet 0.7.x is available here.

Demo

https://frogcat.github.io/leaflet-tilelayer-mask/

Usage

// Create map
var map = L.map("map", {
 zoom : ...,
 center : ...
});

// Add background tile layer
L.tileLayer(...).addTo(map);

// Create foreground tile layer with mask
var fg = L.tileLayer.mask('https://aginfo.cgk.affrc.go.jp/ws/tmc/1.0.0/Kanto_Rapid-900913-L/{z}/{x}/{y}.jpg', {
  maskUrl : 'star.png', // optional
  maskSize : 1024  //optional
).addTo(map);

// Add event handler to update mask position
map.on("mousemove", function(e) {
 fg.setCenter(e.containerPoint);
});

Options

Option	Type	Default	Description
maskUrl	String	#1	Url of mask image
maskSize	L.point or Number	L.point(512,512)	mask size

Note #1 : Built in image 'data:image/png;base64,...' (white circle with soft edge over transparent background)

Methods

Method	Returns	Description
setCenter(Number x, Number y)	this	Set the mask center relative to map container.
setCenter(Point p)	this	Expects a L.Point object instead

Notice

• Leaflet-tilelayer-mask depends on SVG mask.