Skip to content

Instantly share code, notes, and snippets.

@frogcat

frogcat/20180913.custom.md

Created September 14, 2018 11:01
Show Gist options
  • Save frogcat/4dc69e64d065f1dd3a773378eeb88b98 to your computer and use it in GitHub Desktop.
Save frogcat/4dc69e64d065f1dd3a773378eeb88b98 to your computer and use it in GitHub Desktop.
Download ZIP
custom mvt layer
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello MVT</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]/dist/Leaflet.VectorGrid.bundled.min.js"></script>
</head>
<body>
<div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>
<script>
var MyGridLayer = L.GridLayer.extend({
createTile: function(coords) {
var template = "https://wata909.github.io/atsuma_mvt/sediment/{z}/{x}/{y}.pbf";
fetch(L.Util.template(template, coords)).then(a => a.arrayBuffer()).then(buffer => {
var layers = new VectorTile(new Pbf(buffer)).layers;
Object.keys(layers).forEach(name => {
var layer = layers[name];
for (var i = 0; i < layer.length; i++) {
var geojson = layer.feature(i).toGeoJSON(coords.x, coords.y, coords.z);
L.geoJson(geojson).addTo(map);
}
});
});
return document.createElement('div');
}
});
var map = L.map("map", {
maxZoom: 19,
zoom: 15,
center: [42.7450, 141.9123],
});
L.tileLayer('https://maps.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
}).addTo(map);
new MyGridLayer({
attribution: "<a href='https://github.com/koukita/2018_09_06_atumatyou' target='_blank'>この地図は地理院地図　平成30年北海道胆振東部地震 厚真川地区 正射画像をトレースした地図です</a>"
}).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment