Skip to content

Instantly share code, notes, and snippets.

@frogcat

frogcat/20160526.md

Created May 26, 2016 03:58
Show Gist options
  • Save frogcat/a03678c1900e43a9cb14c141fb7004a1 to your computer and use it in GitHub Desktop.
Save frogcat/a03678c1900e43a9cb14c141fb7004a1 to your computer and use it in GitHub Desktop.
Download ZIP
Retroscope simplified
Raw
20160526.md

Retroscope simplified

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>leaflet-tileoverlay-mask</title>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
<script src="//cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
<script src="//cdn.rawgit.com/mlevans/leaflet-hash/master/leaflet-hash.js"></script>
<script src="//frogcat.github.io/leaflet-tileoverlay-mask/leaflet-tileoverlay-mask.js"></script>
<style>
body {
width: 100%;
height: 100%;
overflow: hidden;
}
#map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
maring: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var bg = L.tileLayer("http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg", {
attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html#ort'>写真(地理院タイル)</a>",
minZoom: 2,
maxZoom: 20,
maxNativeZoom: 18
});
var fg = L.tileOverlay.mask("http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png", {
attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html#std'>標準地図(地理院タイル)</a>",
minZoom: 2,
maxZoom: 20,
maxNativeZoom: 18
});
var map = L.map("map", {
zoom: 15,
center: [35.6707, 139.7852],
layers: [bg, fg]
});
map.on("mousemove", function(event) {
fg.setCenter(event.containerPoint);
});
L.hash(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment