Skip to content

frogcat/leaflet-tilelayer-mask

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

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.

Leaflet-tilelayer-mask

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.