晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

LeafletでGPSログ(GPX)地図:ルート上に30分間隔で時間をラベルで表示。

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

今回、ルート上に30分間隔で時間をラベルで表示するようにした。

https://ok2nd.github.io/leaflet/gpx.html?gpx=gpx/T2019-05-27-14-46.gpx

f:id:art2nd:20210511150404j:plain

f:id:art2nd:20210511150408j:plain

サンプルソース(一部抜粋)≫
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