Leaflet 地図への GeoJSON オーバレイ表示（習作）。
抽出
- OpenStreetMap
> Planet OSM
> Geofabrik
> japan
> kansai
2020-05-07 よりosmiumを用いて「映画館」を抽出。- 条件：タグ
amenity=cinemaの設定があるノードまたはウェイ。 osmium tags-filterを用いる。
- 条件：タグ
$ osmium tags-filter -o kansai-cinema.pbf kansai-latest.osm.pbf \
nw/amenity=cinema
変換
osmium exportを用いて変換。
$ osmium export -f geojson kansai-cinema.pbf \
> kansai-cinema2.geojson
表示
HTML
ヘッダ部
<link
rel="stylesheet"
href="/assets/lib/leaflet/leaflet.css" />
<script
type="text/javascript"
src="/assets/lib/leaflet/leaflet.js"></script>
<script
type="text/javascript"
src="/assets/lib/d3/d3.v3.min.js"></script>
ボディ部
<div id="map"></div>
<script type="text/javascript">
var map = L.map( 'map' ).setView([34.7201,135.4952],7);
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル（淡色地図）</a>',
minZoom: 0,
maxZoom: 18,
errorTileUrl: '/tiles/_/none.png'
}).addTo(map);
JavaScript
- D3 で json を読み込み、完了したら function を呼び出す。
- 呼び出す function の中で GeoJSON を
addTo(map)する。
d3.json( "/assets/map/kansai-cinema.geojson", function(json){
L.geoJSON( json, {
// Visual Style Specification
style: function(feature){
return { color: "maroon" };
}
}).addTo(map);
}
Source:
// Load GeoJSON
d3.json("/assets/map/kansai-cinema.geojson", function(json){
// DEBUG
console.log(json);
// Create GeoJSON Object for the map.
L.geoJSON( json, {
// Visual Style Specification
style: function(feature){
// console.log(feature);
// console.log(feature.geometry.type);
return { color: "maroon" };
}
})
// Reserve Popup Contents to each GeoJSON Object(Layer).
.bindPopup(function(layer){
// console.log(layer);
// layer <- Rendering Object with GeoJSON Feature ...
// ... i.e. GeoJSON geometry and feature properties
// return layer.feature.properties.NAME_JA;
return layer.feature.properties.name;
})
// Add to the map.
.addTo(map);
// Remove "loading..." popup.
popup.remove();
});