地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。
今回、ルート上に30分間隔で時間をラベルで表示するようにした。
https://ok2nd.github.io/leaflet/gpx.html?gpx=gpx/T2019-05-27-14-46.gpx
≪サンプルソース(一部抜粋)≫
function gpx2map(gpxStr, resetBtn=false) { // --------------------------------------------------- winResize(); window.addEventListener('DOMContentLoaded', function() { window.addEventListener('resize', function() { winResize(); }); }); // --------------------------------------------------- var parser = new DOMParser(); var gpx = parser.parseFromString(gpxStr, 'text/xml'); var elements = gpx.getElementsByTagName('trkpt'); // --------------------------------------------------- var distTotal = 0; var before = {}; var height_max = -10000; var height_min = 10000; var routeLatLng = []; var chartEle = []; var pointCnt = 0; map = L.map('map'); for (var i=0; i<(elements.length); i++) { let pos = gpxParse(elements.item(i)); if (i == 0) { var startTime = pos['time'].getTime(); } else { let before = gpxParse(elements.item(i-1)); distTotal += distance(before['lat'], before['lon'], pos['lat'], pos['lon'], false); } height = parseFloat(pos['ele']); if (height_max < height) height_max = height; if (height_min > height) height_min = height; chartEle[i] = [pos['time'].getTime() + 60*60*9*1000, parseInt(height)]; // 日本時間 routeLatLng[i] = [pos['lat'], pos['lon']]; if (pos['time'].getTime() > (startTime + (60*30*1000) * pointCnt) ) { // 30分間隔 timeLavel(pos['lat'], pos['lon'], pos['time']); pointCnt++; } } } function timeLavel(lat, lon, time) { let timeLavel = L.divIcon({ html: '<div class="timeLavel">' + time.toLocaleTimeString().substr(0,5) + '</div>', iconSize: [0,0] }); L.marker([lat, lon], {icon: timeLavel}).addTo(map); }
ファイルアップロード版も同様に変更した。
https://ok2nd.github.io/leaflet/gpx-upload.html