昨日から「Leaflet」を使って「Google マップ」「OpenStreetMap」「国土地理院」「Esri World Topo Map」の地図表示を試している。
この地図に以下の機能を追加。
- 地図上の任意の地点をクリックしてマーカー表示
- 地点をクリックし直したら、先のマーカーは削除
- マーカーにポップアップを表示
- ポップアップにクリックした地点の緯度・経度を表示
- ポップアップにクリックした地点の標高を表示
緯度経度は、国土地理院のサーバーから取得する。
JavaScriptに以下のコードを追加。
・・・・・ map.on('click', onMapClick); var clickMarker = null; function onMapClick(e) { if (clickMarker) { map.removeLayer(clickMarker); } var lat = e.latlng.lat; var lng = e.latlng.lng; // 地理院地図サーバから標高を求める // http://maps.gsi.go.jp/development/elevation_s.html var src = 'https://cyberjapandata2.gsi.go.jp/general/dem/scripts/getelevation.php?lon=' + lng + '&lat=' + lat ; var req = new XMLHttpRequest(); req.onreadystatechange = function() { if(req.readyState == 4 && req.status == 200) { var json = req.responseText; var results = JSON.parse(json); var popStr = '緯度:' + lat + '<br>経度:' + lng + '<br>標高:' + results.elevation + 'm'; clickMarker = L.marker(e.latlng).on('click', onMarkerClick).addTo(map).bindPopup(popStr).openPopup(); } }; req.open("GET", src, false); req.send(null) } function onMarkerClick(e) { map.removeLayer(clickMarker); }
【後日追記】
XMLHttpRequest()が非推奨なのでFetch APIに変更。
・・・・・ map.on('click', onMapClick); var clickMarker = null; function onMapClick(e) { if (clickMarker) { map.removeLayer(clickMarker); } var lat = e.latlng.lat; var lng = e.latlng.lng; // 地理院地図サーバから標高を求める // http://maps.gsi.go.jp/development/elevation_s.html var src = 'https://cyberjapandata2.gsi.go.jp/general/dem/scripts/getelevation.php?lon=' + lng + '&lat=' + lat; fetch(src) .then((response) => { return response.text(); }) .then((text) => { var results = JSON.parse(text); var popStr = '緯度:' + lat + '<br>経度:' + lng + '<br>標高:' + results.elevation + 'm'; clickMarker = L.marker(e.latlng).on('click', onMarkerClick).addTo(map).bindPopup(popStr).openPopup(); }) } function onMarkerClick(e) { map.removeLayer(clickMarker); }
サンプル >>> https://ok2nd.github.io/leaflet/fujisan-05.html