LeafletでGPSログ(GPX)地図：XMLHttpRequest()が非推奨なのでFetch APIに変更。

地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。

今回、JavaScriptのXMLHttpRequest()が非推奨になっているらしいので、GPXファイルを読み込む箇所と、国土地理院サーバから標高を求める箇所を、Fetch APIに変更。

以下、JavaScriptの修正箇所。

https://ok2nd.github.io/leaflet/gpx.html?gpx=gpx/2017_yakushima.gpx

【修正前】

var request = new XMLHttpRequest();
request.open('get', arg.gpx, false);
request.send(null);
if (request.status == 404) {
	let div = document.getElementById('container');
	div.innerHTML = '<div class="msg"><p>GPXファイル（<span class="emp">' + arg.gpx + '</span>）が見つかりません。</span></p></div>';
} else {
	gpx2map(request.responseText);		// request.responseText: gpxデータ
}

【修正後】

fetch(arg.gpx)
.then((response) => {
	if(response.ok) {
		return response.text();
	} else {
		throw new Error();
	}
})
.then((text) => {
	gpx2map(text);		// text: gpxデータ
})
.catch((error) => {
	let div = document.getElementById('container');
	div.innerHTML = '<div class="msg"><p>GPXファイル（<span class="emp">' + arg.gpx + '</span>）が見つかりません。</span></p></div>';
})

https://ok2nd.github.io/leaflet/js/my-gpx-1.7.js

【修正前】

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)

【修正後】

fetch(src)
.then((response) => {
	return response.text();
})
.then((text) => {	// text: json
	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();
})