Skip to content

Instantly share code, notes, and snippets.

@frogcat

frogcat/20191218.md

Last active December 18, 2019 04:11
Show Gist options
  • Save frogcat/509368712d44e8430a32f9ba5553f18d to your computer and use it in GitHub Desktop.
Save frogcat/509368712d44e8430a32f9ba5553f18d to your computer and use it in GitHub Desktop.
Download ZIP
leaflet-tilelayer-mask maskUrl example
Raw
20191218.md

leaflet-tilelayer-mask maskUrl example

Raw
external.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>leaflet-boilerplate</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/leaflet-hash.js"></script>
<script src="http://frogcat.github.io/leaflet-tilelayer-mask/leaflet-tilelayer-mask.js"></script>
</head>
<body>
<div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>
<script>
var map = L.map("map", {
zoom: 16,
center: [35.6323, 139.768815],
maxZoom: 18,
minZoom: 15
});
map.zoomControl.setPosition("bottomright");
map.attributionControl.addAttribution("<a href='https://github.com/frogcat/leaflet-tilelayer-mask'>fork me on GitHub</a>");
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
attribution: '<a href="http://maps.gsi.go.jp/development/">GSI Ortho</a>'
}).addTo(map);
var mask = L.tileLayer.mask('http://www.finds.jp/ws/tmc/1.0.0/Kanto_Rapid-900913-L/{z}/{x}/{y}.png', {
attribution: '<a href="http://habs.dc.affrc.go.jp/">NIAES, NARO</a>',
maskUrl : 'https://i0.wp.com/mirrors.creativecommons.org/presskit/logos/cc.logo.png',
maskSize: 512,
maxZoom: 18,
maxNativeZoom: 17
}).addTo(map);
map.on("mousemove", function(e) {
mask.setCenter(e.containerPoint);
});
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>leaflet-boilerplate</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/leaflet-hash.js"></script>
<script src="http://frogcat.github.io/leaflet-tilelayer-mask/leaflet-tilelayer-mask.js"></script>
</head>
<body>
<div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>
<script>
var map = L.map("map", {
zoom: 16,
center: [35.6323, 139.768815],
maxZoom: 18,
minZoom: 15
});
map.zoomControl.setPosition("bottomright");
map.attributionControl.addAttribution("<a href='https://github.com/frogcat/leaflet-tilelayer-mask'>fork me on GitHub</a>");
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
attribution: '<a href="http://maps.gsi.go.jp/development/">GSI Ortho</a>'
}).addTo(map);
var mask = L.tileLayer.mask('http://www.finds.jp/ws/tmc/1.0.0/Kanto_Rapid-900913-L/{z}/{x}/{y}.png', {
attribution: '<a href="http://habs.dc.affrc.go.jp/">NIAES, NARO</a>',
maskUrl : 'star.png',
maskSize: 512,
maxZoom: 18,
maxNativeZoom: 17
}).addTo(map);
map.on("mousemove", function(e) {
mask.setCenter(e.containerPoint);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment