Skip to content

Instantly share code, notes, and snippets.

@frogcat

frogcat/20180413.md

Last active September 7, 2020 11:49
Show Gist options
  • Save frogcat/599ebaac71c9b58d0c370ac6c1f92025 to your computer and use it in GitHub Desktop.
Save frogcat/599ebaac71c9b58d0c370ac6c1f92025 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
20180413.md

leaflet-boilerplate

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>
<style>
.leaflet-control-container::after {
content: url(https://maps.gsi.go.jp/image/map/crosshairs.png);
z-index: 1000;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>
<script>
var map = L.map("map", L.extend({
zoom: 15,
center: [35.6707, 139.7852]
}, L.Hash.parseHash(location.hash)));
L.control.layers({
"淡色地図": L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png", {
attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>地理院タイル</a>"
}).addTo(map),
"標準地図": L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png", {
attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>地理院タイル</a>"
}),
"色別標高図": L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png", {
attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>地理院タイル</a>"
}),
"写真": L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg", {
attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>地理院タイル</a>"
}),
"OpenStreetMap": L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
})
}).addTo(map);
map.zoomControl.setPosition("bottomright");
L.control.scale({
imperial: false,
metric: true
}).addTo(map);
L.hash(map);
L.marker(map.getCenter()).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment