frogcat / leaflet-tilelayer-mask

A Leaflet Tilelayer with mask

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.

leaflet-tilelayer-mask's Issues

maskUrl doesn't seem to work

Thank you very much for this great plug in. It works perfectly well with the default circular mask (even if smoother edges would be great) but I didn't manage to make it work with an external .png.
Is there any special care needed when creating this png ? A special folder where to drop it ?
Let us know !

Mask appearing as a square instead of a circle

Hi,

I have been using leaflet-tilelayer-mask for a few months. It has been great so many thanks for making it in the first place!

Recently I've had issues with the mask appearing as a square rather than a circle. Any idea what might be causing that?

Happy to add an extract of code if that helps debug

Graeme