晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

Leaflet地図:クリックした地点の緯度・経度、標高を表示。サンプルソース。

昨日から「Leaflet」を使って「Google マップ」「OpenStreetMap」「国土地理院」「Esri World Topo Map」の地図表示を試している。

この地図に以下の機能を追加。

  1. 地図上の任意の地点をクリックしてマーカー表示
  2. 地点をクリックし直したら、先のマーカーは削除
  3. マーカーにポップアップを表示
  4. ポップアップにクリックした地点の緯度・経度を表示
  5. ポップアップにクリックした地点の標高を表示

f:id:art2nd:20210429143245j:plain

緯度経度は、国土地理院のサーバーから取得する。

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);
}

f:id:art2nd:20210429141857j:plain

サンプル >>> https://ok2nd.github.io/leaflet/fujisan-05.html