【Leaflet】GPX を地図に埋め込む
Contents
はじめに
サイクリングや登山をすると、GPS ログをとることがしばしありますが、そういったときに GPS ログは GPX （GPS eXchange format：XMLの一種）という形式で保存されることも多いです。例えば YAMAP という登山アプリがありますが、登山時の GPS ログ（GPX）は Web版 からダウンロードできるようになっています（無料会員でもダウンロード可能です）。
今回はそうやって保存した GPX を、埋め込み地図を描画する JavaScript ライブラリ 「Leaflet」で読み込む方法について説明します。なお、こちらの記事は「【Leaflet】埋め込み地図を表示させる方法」の続きです。
DrawTrail
leaflet-gpx
Leaflet で GPX を読み込むには、別途プラグイン「leaflet-gpx」を使う必要があります。
まず GitHub から JavaScript をダウンロードして「gpx.min.js」を自分のサーバーに置いておくか、以下のコードより leaflet-gpx の JavaScript を読み込みます。登山ブログのように、各ページで leaflet-gpx を使うなら、自分のサーバーに置いておくのが良いかと思います（その方がバージョンアップの管理が楽です）。今回はお試しなので、CSNからアクセスします。
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>Leaflet で map を定義した後、以下のコードを書き込めば、GPX が読み込まれます。GPX に合わせて地図の表示範囲が自動で決まるので、今回は map.setView() が不要です。
const gpx = '...'; // GPX のファイルパス
new L.GPX(gpx, {async: true}).on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);ただし、このプラグインでは以下のようにデフォルトでスタート地点とゴール地点のマーカー画像のファイルパスが登録されています。
marker_options: {
startIconUrl: 'pin-icon-start.png',
endIconUrl: 'pin-icon-end.png',
shadowUrl: 'pin-shadow.png'
}大抵画像が見つからないといってエラーを吐くので、この設定を上書きして、スタート地点とゴール地点のマーカーを消去します。別途マーカー画像を登録しても良いかもしれません。
const gpx = '...'; // GPX のファイルパス
new L.GPX(gpx, {
async: true,
marker_options: {
startIconUrl: '',
endIconUrl: '',
shadowUrl: ''
}}).on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);実装例
全体のソースコードと実装例は以下の通りです。今回は起伏が分かりやすいようにマップタイルに「OpenTopoMap」を使ってみました。マップタイルについてはこちらにまとめたので、気になる方は見てみてください。
<!DOCTYPE html>
<html>
<head>
<title>htmlMap</title>
<meta http-equiv='content-type' charset='utf-8'>
<meta name='viewport' content='width=device-width'>
</head>
<body>
<!-- 埋め込みマップのdivタグ。マップサイズはwidth（幅）とheight（高さ）で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>
<!-- 以下LeafletのJavaScriptとCSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<!-- 「leaflet-gpx」のプラグイン -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
<script>
function init_map() {
const map = L.map('mapcontainer',{
worldCopyJump: true, //一周してもオブジェクトを保持
maxBounds: [[90, -Infinity], [-90, Infinity]], //北極と南極で範囲制限
minZoom:2,
maxZoom:15
});
// マップタイルを読み込み、引用元を記載する（今回は起伏が見やすいように OpenTopoMap ）
L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
attribution: "©<a href='http://osm.org/copyright'>OpenStreetMap</a>, <a href='http://viewfinderpanoramas.org/'>SRTM</a> | Tiles:©<a href='https://opentopomap.org/'>OpenTopoMap</a>"}).addTo(map);
// マップにスケールバーを追加
L.control.scale({imperial: false, metric: true, position: 'topright'}).addTo(map);
// GPX を読み込み
const gpx = '...'; // GPX のファイルパス
new L.GPX(gpx, {async: true,
marker_options: {
startIconUrl: '',
endIconUrl: '',
shadowUrl: ''
}}).on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);
}
//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());
</script>
</body>
</html>
なお、GPX 地図を表示する他の方法も有ります。「GPX 地図をサイト/ブログに埋め込む方法」を見てみてください。
