5月10日。兵庫県加古郡稲美町のいなみ野水辺の里公園、加古大池。JR土山駅からバスで十七丁バス停。十七丁バス停→いなみ野水辺の里公園→加古大池→上新田北口バス停。6.4km、3時間。
加古大池は大池というだけあって、かなり大きい。(下の地図は最近作成したLeafletを使った地図作成のしくみを使って作成。)
水辺の里公園、加古大池で撮影した野鳥。(↓)
地図データを扱う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>
地図データを扱う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
【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 }; }
地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。
今回、現在地表示機能付きマップに、標高グラフを追加で表示/非表示が切り替えできるようにした。
サンプル >>> https://ok2nd.github.io/leaflet/gpx-sample5.html
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。
この地図に、現在地表示機能と任意の場所クリックで緯度経度、標高表示機能を追加した。標高グラフは表示されない。
サンプル >>> https://ok2nd.github.io/leaflet/gpx-sample4.html
現在地表示機能と任意の場所クリックによるマーカー表示については以下を参照。
(↓)機能追加。