Leafletで、GPSログ(GPX)を地図に表示する。Google マップ、OpenStreetMap、国土地理院地図、Esri World Topo Map。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。

今回、GPSログ(GPXファイル)を地図に表示してみた。参考にしたのは以下のページ。

「Leaflet」のプラグイン「leaflet-gpx」を使う。

まず、「leaflet-gpx」のJavaScriptファイルを読み込む。

<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.5.1/gpx.min.js"></script>

GPSログを表示するだけなら、以下のようにGPXファイルを指定して、L.GPXを呼び出すだけ。ただ、これだと開始地点と終了地点のマーカーが大きすぎるのと経路の線の色がきつい。

var gpx = 'gpx/2021_05_04_10_34_23.gpx';
new L.GPX(gpx, {async: true}).on('loaded', function(e) {
	map.fitBounds(e.target.getBounds());
}).addTo(map);

マーカーと線の色を変えてみた。

var gpx = 'gpx/2021_05_04_10_34_23.gpx';
new L.GPX(gpx, {
	async: true,
	marker_options: {
		startIconUrl: 'icon/ltblue-dot.png',
		endIconUrl: 'icon/red-dot.png',
		shadowUrl: false,
		iconSize: [32, 32],
		iconAnchor: [16, 30]
	},
	polyline_options: {
		color: '#3B83CC',
		opacity: 0.8,
		weight: 5,
		lineCap: 'round'
    	}
}).on('loaded', function(e) {
	map.fitBounds(e.target.getBounds());
}).addTo(map);

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

下は、GoogleマイマップにGPXをインポートした例。

（↓）機能追加。

---