Skip to content

Instantly share code, notes, and snippets.

@frogcat

frogcat/2011-03x2013-09

Last active August 29, 2015 14:22
Show Gist options
  • Save frogcat/04f007abda2a77d3bcdf to your computer and use it in GitHub Desktop.
Save frogcat/04f007abda2a77d3bcdf to your computer and use it in GitHub Desktop.
Download ZIP
311 / 2.5 years later
Raw
2011-03x2013-09
東日本大震災被災地震災直後オルソ画像（2011年3月～2011年4月撮影）
東日本大震災被災地震災後オルソ画像（2013年9月～2013年12月撮影）
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>2011-03x2013-09</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="//cdn.rawgit.com/mlevans/leaflet-hash/master/leaflet-hash.js"></script>
<script src="//frogcat.github.io/leaflet-tilelayer-mask/leaflet-tilelayer-mask.js"></script>
<style>
body {
width: 100%;
height: 100%;
overflow: hidden;
}
#map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var bg = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/toho1/{z}/{x}/{y}.jpg', {
attribution : '<a href="http://maps.gsi.go.jp/development/">東日本大震災被災地震災直後オルソ画像（2011年3月～2011年4月撮影）</a>',
maxNativeZoom : 17
});
var fg = L.tileLayer.mask('http://cyberjapandata.gsi.go.jp/xyz/toho4/{z}/{x}/{y}.jpg', {
attribution : '<a href="http://maps.gsi.go.jp/development/">東日本大震災被災地震災後オルソ画像（2013年9月～2013年12月撮影）</a>'
});
var map = L.map("map", {
zoom : 16,
center : [ 39.008632,141.632944 ],
maxZoom : 18,
minZoom : 15,
inertia : false,
layers : [ bg, fg ]
}).on("mousemove", function(e) {
fg.setCenter(e.containerPoint.x, e.containerPoint.y);
});
map.zoomControl.setPosition("bottomright");
L.hash(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment