兵庫県東播磨：稲美町）加古大池、いなみ野水辺の里公園。

5月10日。兵庫県加古郡稲美町のいなみ野水辺の里公園、加古大池。JR土山駅からバスで十七丁バス停。十七丁バス停→いなみ野水辺の里公園→加古大池→上新田北口バス停。6.4km、3時間。

加古大池は大池というだけあって、かなり大きい。（下の地図は最近作成したLeafletを使った地図作成のしくみを使って作成。）

水辺の里公園、加古大池で撮影した野鳥。（↓）

---

LeafletでGPSログ(GPX)地図：クライアントローカルGPXファイルをアップロード可能に。

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

今回、パソコン等のクライアントローカルにある任意のGPXファイルを指定して地図表示ができるようにした。GPXファイルはサーバーに送られるわけではない。すべてJavaScriptでクライアントサイドで処理を行っている。

サンプル ＞＞＞ https://ok2nd.github.io/leaflet/gpx-upload.html

クライアントローカルのファイルアップロード処理は以下。

<script>
window.addEventListener('DOMContentLoaded', function() {
	window.addEventListener('resize', function() {
		winResize();	// 標高グラフ表示のため
	});
	document.querySelector('#file').addEventListener('change', function(e) {
		if (window.File) {
			var input = document.querySelector('#file').files[0];
			var reader = new FileReader();
			reader.addEventListener('load', function(e) {
				document.getElementById('gpx-input').style.display = 'none';
				gpx2map(reader.result, true);		// reader.result: gpxデータ
			}, true);
			reader.readAsText(input);
		}
	}, true);
});
</script>

LeafletでGPSログ(GPX)地図：GPXファイルをURLで任意指定可能に。

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

今回、GPXファイルをURLで任意指定できるようにした。

サーバーローカルにGPXファイルを置いて指定するか、任意のサーバーにGPXファイルを置いて指定する。ただ、別サーバーのGPXファイルが指定可能かどうかは環境による。

今まで、GPXのルートログを地図表示するのに、「Leaflet」のプラグイン「leaflet-gpx」を使ってきた。今回、「leaflet-gpx」を使わないバージョンも作成。

■「leaflet-gpx」を使うバージョン

https://ok2nd.github.io/leaflet/gpx-leaflet-gpx.html

使用形式： https://ok2nd.github.io/leaflet/gpx-leaflet-gpx.html?gpx=xxx.gpx

サンプル ＞＞＞ https://ok2nd.github.io/leaflet/gpx-leaflet-gpx.html?gpx=gpx/2020_12_05_10_43_35.gpx

■「leaflet-gpx」を使わないバージョン

https://ok2nd.github.io/leaflet/gpx.html

使用形式： https://ok2nd.github.io/leaflet/gpx.html?gpx=xxx.gpx

サンプル ＞＞＞ https://ok2nd.github.io/leaflet/gpx.html?gpx=gpx/2020_12_05_10_43_35.gpx

サンプル ＞＞＞ https://ok2nd.github.io/leaflet/gpx.html?gpx=https://ok2nd.github.io/leaflet/gpx/2020_12_05_10_43_35.gpx

【GPX形式サンプル】

<trkpt lat="34.724837" lon="135.158676">
	<ele>326.27</ele>
	<time>2021-05-04T01:34:20.000Z</time>
	<extensions>
		<geotracker:meta c="2.91" s="0" />
	</extensions>
</trkpt>

【プログラムソース抜粋】

URLからのGPXファイル取得は以下。

<script>
//	https://........./gpx.html?gpx=xxx/xxx.gpx
let arg = new Object;
let pair = location.search.substring(1).split('&');
for (var i=0; pair[i]; i++) {
	let kv = pair[i].split('=');
	arg[kv[0]] = kv[1];
}
if (typeof arg.gpx === 'undefined' || arg.gpx == '') {	// arg.gpx: gpxファイル名（'xxx/xxx.gpx'）
	let div = document.getElementById('container');
	let href = location.href.split('?');
	div.innerHTML = '<div class="msg"><p>GPXファイルを指定してください。</p><p>例：' + href[0] + '<span class="emp">?gpx=xxx/xxx.gpx</span></p></div>';
} else {
	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データ
	}
}
</script>

gpx2map()の中の抜粋。L.polyline()でルートを表示。

function gpx2map(gpxStr, resetBtn=false) {
	map = L.map('map');
	var parser = new DOMParser();
	var gpx = parser.parseFromString(gpxStr, 'text/xml');
	var elements = gpx.getElementsByTagName('trkpt');
	var routeLatLng = [];
	for (var i=0; i<(elements.length); i++) {
		let pos = gpxParse(elements.item(i));
		routeLatLng[i] = [pos['lat'], pos['lon']];
	}
	L.polyline(routeLatLng, {color: '#3B83CC', weight: 5}).addTo(map);
}
function gpxParse(trkpt) {
	var timeTxt = trkpt.getElementsByTagName('time')[0].textContent;
	var time = new Date(timeTxt);
	return {
		lat: parseFloat(trkpt.getAttribute('lat')),
		lon: parseFloat(trkpt.getAttribute('lon')),
		time: time,
		dateStr: time.toLocaleDateString(),
		timeStr: time.toLocaleTimeString(),
		ele: trkpt.getElementsByTagName('ele')[0].textContent
	};
}

---

LeafletでGPSログ(GPX)地図：標高グラフ表示/非表示、切り替え機能。

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

今回、現在地表示機能付きマップに、標高グラフを追加で表示/非表示が切り替えできるようにした。

サンプル ＞＞＞ https://ok2nd.github.io/leaflet/gpx-sample5.html

---

LeafletでGPSログ(GPX)地図：現在地表示機能追加。

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

この地図に、現在地表示機能と任意の場所クリックで緯度経度、標高表示機能を追加した。標高グラフは表示されない。

サンプル ＞＞＞ https://ok2nd.github.io/leaflet/gpx-sample4.html

現在地表示機能と任意の場所クリックによるマーカー表示については以下を参照。

（↓）機能追加。

---