【Leaflet】GPX をマップに埋め込む
はじめに
サイクリングや登山をすると、GPS ログをとることがしばしありますが、そういったときに GPS ログは GPX （GPS eXchange format：XMLの一種）という形式で保存されることも多いです。例えば YAMAP という登山アプリがありますが、登山時の GPS ログ（GPX）は Web版 からダウンロードできるようになっています（無料会員でもダウンロード可能です）。
今回はそうやって保存した GPX を、埋め込み地図を描画する JavaScript ライブラリ 「Leaflet」で読み込む方法について説明します。
パントレ
なお、この記事は「【Leaflet入門】地図を表示する方法と基本的な使い方」の続きです。
leaflet-gpx
Leaflet で GPX を読み込むには、別途プラグイン「leaflet-gpx」を使う必要があります。
まず、GitHub から JavaScript をダウンロードして「gpx.js」を自分のサーバーに置いておくか、以下のコードより leaflet-gpx の JavaScript を読み込みます。登山ブログのように、各ページで leaflet-gpx を使うなら、自分のサーバーに置いておくのが良いかと思います。
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/2.1.2/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);デフォルトでは、スタート地点とゴール地点に Leaflet のマーカーアイコンが表示されるようになっています。ここのアイコン画像は以下のコードで変更できます。ここらへんの仕様は古いバージョンから変更になっているみたいです。
const gpx = 'GPX のファイルパス';
new L.GPX(gpx, {
async: true,
markers: {
startIcon: 'スタートアイコンの URL',
endIcon: 'ゴールアイコンの URL',
}
}).on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);全体のソースコードと実装例は以下の通りです。
<!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>
<!-- 以下leflet-gpxのJavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/2.1.2/gpx.min.js"></script>
<script>
function init_map() {
const map = L.map('mapcontainer',{
minZoom:2,
maxZoom:15
});
//初期の中心位置とズームレベルを設定
map.setView([43.659, 142.141], 6);
// マップタイルを読み込み、引用元を記載する（今回は起伏が見やすいように 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,
markers: {
startIcon: 'スタートアイコンの URL',
endIcon: 'ゴールアイコンの URL',
}
}).on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);
}
//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());
</script>
</body>
</html>実装例
関連記事
GUI で Leaflet の HTML/JavaScript を生成するツールはこちら。コード書くのがめんどくさいな～って人は使ってみてください。WordPress の場合、生成されたコードをカスタム HTML に貼り付ければ動きます。ラインを描画して距離を測定する機能もついています。
Leaflet、MapLibre、OpenLayers の比較はこちら。
MapLibre についてはこちら。
ちょっと宣伝
当サイトは Web 地図を積極的に用いた海外旅ブログまとめサイトとなっています。トップページに地図がありますが、地名を押すと画像が開き、画像を押すと関連記事一覧（クリック数順）が開きます。記事数が多い国ほど赤く、地名もその国で記事が多い都市の文字が大きくなるようにしています。ぜひ覗いてみてください。
当サイトで海外旅ブログを執筆することも可能です（もちろん無料です）！ また既にブログをお持ちの方も、当サイトからリンクを貼ることができるようになっています。パントレ開発部までお気軽にお問い合わせください。
このページが皆様のプログラミングの一助となりますことをお祈りいたします
パントレ開発部