LeafletでGPSログ(GPX)地図：標高グラフ（Highcharts）追加。

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

この地図に、標高グラフを追加した。

サンプル ＞＞＞ https://ok2nd.github.io/leaflet/gpx-sample3.html

グラフ作成には、「Highcharts」を使用。

「highcharts.js」を読み込む。

<script src="//code.highcharts.com/highcharts.js"></script>

GPXから読み込んだ時間データと標高データを使う。

<script>
・・・・・
var chartEle = [];
for (var i=0; i<(elements.length); i++) {
	let pos = gpxParse(elements.item(i));
	if (i > 0) {
		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)];	// 日本時間
}
var subtitle = start['timeStr'] + '～' + end['timeStr'] + '　所要時間:' + diffTime
	+ '　距離:' + distTotalKm + 'km　最高地点:' + Math.round(height_max) + 'm　最低地点:' + Math.round(height_min) + 'm';
chartView(chartEle, subtitle);
function chartView(chartEle, subtitle) {
chart = new Highcharts.Chart({
	chart: {
		renderTo: 'chart',
		zoomType: 'xy'
	},
	title: {
		text: '標高 グラフ',
		style: {
			fontWeight: 'bold'
		}
	},
	subtitle: {
		text: subtitle
	},
	xAxis: {
		type: 'datetime'
	},
	yAxis: [{ // Primary yAxis
		title: {
			text: '標高',
			style: {
				color: '#89A54E'
			}
		},
		labels: {
			formatter: function() {
				return this.value +' m';
			},
			style: {
				color: '#89A54E'
			}
		}
	}],
	tooltip: {
		formatter: function() {
			var dt = Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x);
			var unit = {
				'標高': 'm'
			}[this.series.name];
			return '<b>' + dt +'</b><br><b>'+ this.y + '</b> ' + unit;
		}
	},
	legend: {
		layout: 'vertical',
		align: 'left',
		verticalAlign: 'top',
		floating: true,
		backgroundColor: '#FFFFFF'
	},
	plotOptions: {
		area: {
			fillColor: {
				linearGradient: {x1:0, y1:0, x2:0, y2:1},
				stops: [
					[0, '#89A54E'],
					[1, 'rgba(0,30,0,0)']
				]
			},
			lineWidth: 1,
			marker: {
				enabled: false,
				states: {
					hover: {
						enabled: true,
						radius: 5
					}
				}
			},
			shadow: false,
			states: {
				hover: {
					lineWidth: 1
				}
			},
			threshold: null
		},
		spline: {
			lineWidth: 1,
			marker: {
				enabled: false,
			}
		}
	},
	series: [{
		name: '標高',
		color: '#89A54E',
		type: 'area',
		data: chartEle
	}]
});
}
</script>

ブラウザの画面サイズの変化に合わせて、地図の高さを変えるようにした。

<div id="map"></div>
<div id="chart"></div>
・・・・・
<script>
winResize();
window.addEventListener('DOMContentLoaded', function(){
	window.addEventListener('resize', function(){
		winResize();
	});
});
function winResize() {
	let h = document.documentElement.clientHeight;
	document.getElementById('map').style.height = parseInt(h) - 240 + 'px';
}
</script>