Web地図を利用したGPSログ表示

ハンドヘルドGPSやスマホのGPSアプリで記録したログ（移動軌跡）をWeb地図に上乗せし、ユーザのサイトに設置して表示する方法を説明します。このページでは、GPSログを上乗せ表示した地図一般を「ルート地図」と呼んでいます。JavaScriptライブラリとしてOpenLayers／Leaflet／Google Maps API／Bing Maps API／Mapbox GL JS、GPSログのファイル形式としてKML／GeoJSON／GPXをそれぞれ用いた場合のルート地図のソースコードをGitHubで公開しています。

基本仕様

• モバイル対応：フレームのサイズ変更に追従し、常にフレーム全体で表示。
• モダンブラウザ（Chrome、Firefox、Safari、Microsoft Edge）に対応。Internet Explorer 11 はサポート外です。
• ユーザサイトに設置するファイルは基本的に、サイト内で共通のHTMLファイルが1つと、表示するルート地図毎にGPSデータファイルが1つ。
• GPSデータのファイル形式は次の3種類のうちのいずれか一つ。
  1. GPX：カシミール3Dから出力されたもので、名前空間 kashmir3d の拡張要素でシンボル画像や線色、線幅、線種のスタイル情報をもつ。
  2. KML：「KMLウェブ地図プロファイル」（注）に準拠したもの。ポイントとラインに対応。
  3. GeoJSON：「スタイルつきGeoJSON規約」（注）に準拠したもの。L.IconとL.Pathの属性名の一部に対応。
• カシミール3Dで指定したウェイポイントのアイコン画像や、トラックに指定した線色、線幅、線種をWeb地図で再現して表示（一部に制約あり）。
• カシミール3Dで出力したGPXファイルをKMLファイルやGeoJSONファイルに変換するツール（GPX2GeoJSON）も公開。
• HTML Living Standard + CSS3 + JavaScript (ES2015) で記述。
• MITライセンスで公開。

注：「KMLウェブ地図プロファイル」と「スタイルつきGeoJSON規約」の詳細については、国土地理院HPの「作図・ファイル機能のデータ仕様」を参照してください。

表示例

図1(a)はカシミール3Dで作成したルート地図を画像ファイルとして保存・表示したもの、図1(b)は同じルート地図をLeafletとGeoJSONを用いてWeb地図として表示したものです。図1(b)はWeb地図の基本的な操作（スクロール、ズーム、地図切替）に加え、アイコンをクリックしてポップアップ窓を開くことができます。

(a) カシミール3Dで作成したルート地図（PNG画像）

(b) Leaflet + GeoJSON によるルート地図
図1 ルート地図の作例

JavaScriptライブラリとGPSファイル形式のその他の組み合わせの表示例は、次表の中の ボタンをクリックすると、別窓が開いて閲覧することができます。なお、OpenLayers の場合は、Shift+Alt+マウス左ボタンで地図を回転させることができます。

表中、「地図データ／ラスタ」の列は、GPSデータの上乗せ表示のない最も簡易な地図のみの表示例、「複数地図」の列はそれに複数の種類の地図を切り換えて表示する機能を付加した表示例です。

注意：OpenLayers (npm) の行は、olパッケージを用いたもので、JavaScriptライブラリのファイルサイズを約6割まで削減できますが、設置にはnpmの知識が必要になります。また、Mapbox GL JS + GSIBVの行は、国土地理院が実験的に提供しているベクトルタイルを利用した実験的なコードです（ベクトルタイルの表示例はol-gsibv-styleにもあります）。これらについての詳しい説明は割愛します。

表1 JavaScriptライブラリとGPSファイル形式の組み合わせ毎のルート地図の表示例

JavaScriptライブラリ	APIキー	地図データ		複数 地図	GPSファイル形式
		ラスタ	ベクタ		KML		GeoJSON	GPX
Leaflet 1.9.4 ※7	不要				※1	※2
OpenLayers v9.1.0	不要
Google Maps API	要				※3	※4
Bing Maps API ※7	要				※5	※6
Mapbox GL JS v2.12.0	要
Mapbox GL JS + GSIBV	要 ※8

※1： サードパーティのL.KML.jsが必要。
※2： ※1の改良版。L.KML.jsは不要。線種は点線に固定。
※3： KMLファイルはイントラネットに置けない。ポップアップ窓の表示が文字化けする。
※4： ※3の制約を解消した改良版。
※5： Bing Maps APIに不具合があり、ある条件（description要素はCDATA、Style要素が前でPlacemark要素が後）を満たさないKMLファイルは読み込めない。Python版GPX2GeoJSONは、この条件を満たすKMLファイルを出力する。
※6： ※5の制約を解消した改良版。線種は点線に固定。
※7： Internet Explorer 11 で閲覧可能。
※8： v2より要。

ダウンロード

ルート地図のソースコード（HTML、JS、CSS）一式をダウンロードする方法を説明します。まず、https://github.com/anineco/gps-track-mapsにアクセスするとgps-track-mapsのリポジトリ画面が開きます。↓Codeをクリックすると小窓が開き、続いてDownload ZIPをクリックするとダウンロードが始まります。ダウンロードしたZIPファイルを適当なフォルダの下で展開して下さい。

設置手順

図1(b)を例として、ルート地図をユーザサイトに設置する手順の概略を次に示します。なお、Google Maps APIなど、APIキーが必要な場合は、HTMLファイル中の_YOUR_API_KEY_を各自で取得したAPIキーに書き換える必要があります。

1. ハンドヘルドGPSやスマホのGPSアプリで記録したログをカシミール3Dに読み込む。
2. カシミール3DでGPSデータを編集し、図2のようなルート地図を作成する。
3. 編集したGPSデータをGPX形式でファイルに保存する。
4. GPX2GeoJSON（GPX→GeoJSONコンバータ）を用いて、保存したGPXファイルをGeoJSONファイルに変換する。
5. ユーザサイトにルート地図用HTMLファイルとGeoJSONファイルをアップロードし、次のようなディレクトリ構造とする。赤字はアップロードしたファイルを表す。

   .
   ├── your_page.html
   ├── lmap_geojson.html
   └── example
        └── routemap.geojson
   

   注：lmap_kml.htmlの場合は、leaflet-kmlのL.KML.jsを追加して配置する必要がある。

   .
   ├── your_page.html
   ├── lmap_kml.html
   ├── libs
   │    └── L.KML.js
   └── example
        └── routemap.kml
   

6. 次のようなiframe要素のHTMLコードを対象ページのHTMLファイル（your_page.html）に挿入する。このHTMLコードで、表示範囲の中心座標（経度lat、緯度lon、単位は10進数の度）やズームレベル、上乗せするGPSデータのURLを指定する。

   <iframe width="640" height="480"
     src="lmap_geojson.html?lat=36.354746&lon=139.435076&zoom=13&url=example/routemap.geojson">
   </iframe>
   

7. 上記のiframe要素の代わりに、以下のscript要素とa要素のHTMLコードを挿入すると、別窓がポップアップしてルート地図を表示する。

   <script>
   function routemap(url) {
     window.open(url, 'ROUTEMAP', 'width=640,height=480,resizable=yes');
     return false;
   }
   </script>
   

   <a href="lmap_geojson.html?lat=36.354746&lon=139.435076&zoom=13&url=example/routemap.geojson"
     onclick="return routemap(this.href)">ルート地図</a>
   

なお、ルート地図用HTMLファイルは、使用するJavaScriptライブラリとGPSデータのファイル形式の組み合わせ毎に異なるHTMLファイルとなり、ファイル名はXmap_Y.html、または、Xmap_Y_rev.html（改良版）などとなります。ここで、XはJavaScriptライブラリの頭文字（l, o, g, b, m）、YはGPSデータのファイル形式（kml, geojson, gpx）です。これらのルート地図を設置する場合も、設置手順は同様です。

更新履歴

誤字・脱字、リンク切れ等の小さな不具合の修正は随時行っています。

2023-09-09	OpenLayers 8.1.0 にバージョンアップ。
2023-08-03	OpenLayers 7.4.0, Leaflet 1.9.4 にバージョンアップ。
2023-01-28	Mapbox GL JS 2.12.0 にバージョンアップ。
2022-12-23	OpenLayers 7.2.2 にバージョンアップ。
2022-11-22	Leaflet 1.9.3 にバージョンアップ。
2022-09-24	Leaflet 1.8.1、OpenLayers 7.1.0 にバージョンアップ。
2022-03-27	IE11 をサポート外とし、関連する表記を削除。 OpenLayers 6.15.1 にバージョンアップ。
2022-04-22	Leaflet 1.8.0 にバージョンアップ。
2022-03-27	OpenLayers 6.14.1 にバージョンアップ。
2022-03-01	OpenLayers 6.13.0 にバージョンアップ。
2022-01-27	Mapbox GL JS 2.6.1 にバージョンアップ。
2022-01-15	OpenLayers 6.12.0 にバージョンアップ。
2022-01-09	OpenLayers 6.11.0 にバージョンアップ。
2022-01-08	OpenLayers 6.10.0 にバージョンアップ。
2021-10-13	OpenLayers 6.9.0 にバージョンアップ。
2021-10-07	Mapbox GL JS 2.5.0 にバージョンアップ。
2021-09-29	Google Maps APIのIE11のサポートに関して追記。
2021-09-25	OpenLayers 6.8.1 にバージョンアップ。
2021-09-13	OpenLayers 6.7.0 にバージョンアップ。
2021-08-14	Mapbox GL JS 2.4.0 にバージョンアップ。
2021-07-16	OpenLayers 6.6.1 にバージョンアップ。
2021-07-13	OpenLayers 6.6.0 にバージョンアップ。表1の※7、※8を追加。
2021-04-26	OpenLayers v6.4.3を利用したルート地図（IE11サポート版）を追加。ダウンロードの節を補足。
2021-03-06	GPX2GeoJSONについての記述を、旧Perl版から新Python版へ改訂。
2020-12-28	OpenLayers 6.5.0 にバージョンアップ。
2020-12-25	ol-layerswitcher 3.8.3、ol-mapbox-style 6.3.0 にバージョンアップ。
2020-12-06	ol-layerswitcher 3.8.1にバージョンアップ。
2020-10-07	OpenLayers 6.4.3、Leaflet 1.7.1にバージョンアップ。 OpenLayersでポップアップが開く位置をアイコンの真上に変更。
2020-08-12	HTMLコードのサンプルを拡充。
2019-12-29	OpenLayers 6.1.1、Leaflet 1.6.0にバージョンアップ。 Bingマップ版の不具合（The specified credentials are invalid.）を改訂。
2019-07-07	サイトを全面的に改訂。GPX2GeoJSONを公開。

---

© 2019-2022 あにねこ電脳覚書