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>