Skip to content

Instantly share code, notes, and snippets.

@frogcat

frogcat/20171213.md

Created December 13, 2017 11:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save frogcat/334998cbd13c4875211debf0a9e6f785 to your computer and use it in GitHub Desktop.
Save frogcat/334998cbd13c4875211debf0a9e6f785 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
20171213.md

Leaflet1.2 GeoJSON Tile Tips

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
<title>Leaflet1.2 GeoJSON Tile Tips</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-hash@0.2.1/leaflet-hash.js"></script>
</head>
<body>
<div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>
<script>
// Initalize map
var map = L.map("map", L.extend({
minZoom: 17,
zoom: 18,
maxZoom: 22,
center: [35.64430, 139.67124]
}, L.Hash.parseHash(location.hash)));
map.zoomControl.setPosition("bottomright");
L.hash(map);
// Add background layer
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg", {
attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>GSI</a>",
maxZoom: 22,
maxNativeZoom: 18
}).addTo(map);
// Create tilelayer with empty image
L.tileLayer(L.Util.emptyImageUrl, {
attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>GSI</a>",
maxZoom: 22,
maxNativeZoom: 18,
minNativeZoom: 18
}).on("tileload", function(event) {
// Add tileload event handler to load geojson and add geojson layer
var url = "https://cyberjapandata.gsi.go.jp/xyz/experimental_fgd/{z}/{x}/{y}.geojson";
fetch(L.Util.template(url, event.coords)).then(a => a.ok ? a.json() : null).then(geojson => {
if (!geojson || !this._map) return;
event.tile.geojson = L.geoJSON(geojson, {
style: function(geojson) {
return {
weight: 1.5,
color: "#ffffff"
};
}
}).addTo(this._map);
});
}).on("tileunload", function(event) {
// Add tileunload event handler to remove geojson layer
if (event.tile.geojson && this._map)
this._map.removeLayer(event.tile.geojson);
}).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment