LeafletでGPSログ(GPX)地図：30分間隔時間ラベル表示ロジックを修正。

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

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

しかし、GPXログに一定時間空白の時間帯があると、表示される時間ラベルが途中で30分以上の間隔が空いて、その後時間が次第にずれる事が分かった。極力、開始地点からの30分間隔刻みで時間ラベルを表示するように修正した。

https://ok2nd.github.io/leaflet/gpx.html?gpx=gpx/2017_yakushima.gpx

修正前

修正後

以下、JavaScriptの修正箇所。

JavaScript：https://ok2nd.github.io/leaflet/js/my-gpx-1.6.js

var pointCnt = 0;
// var preTime = 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() > (preTime + (60*30*1000)) ) {	// 30分間隔
	if (pos['time'].getTime() > (startTime + (60*30*1000) * pointCnt) ) {	// 30分間隔
		timeLavel(pos['lat'], pos['lon'], pos['time']);
//		preTime = pos['time'].getTime();
		pointCnt++;
	}
}