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

• 更新情報（2020-01-12）
  新サイトはさらにhttps://anineco.nyanta.jp/gps-track-maps/に移転しております。
• 更新情報（2019-07-07）
  本サイトは全面的に改訂され、新サイト（https://anineco.github.io/gps-track-maps/）に移転しました。

このサイトについて

このサイトでは、ハンディGPSで記録したログ（軌跡データ）を、地理院地図の地形図に重ね合わせてホームページに表示する方法を紹介しています。GPSログを表示した地図のことを、本サイトでは「ルート地図」と呼んでいます。地理院地図を用いたルート地図の設置方法を主として扱っていますが、GoogleマップやYahoo!地図を用いたルート地図の設置方法も掲載しています。

このサイトの内容は、GPSからのログの読み込みにカシミール3Dを利用することを前提としています。カシミール3Dで作成したルート地図を、単に画像としてホームページに表示するのではなく、スクロールやズームイン・ズームアウト等の操作が可能なルート地図として表示します。

このサイトでは、ルート地図を作成するためのユーティリティGPX2JSGI（GPX→KMLコンバータ）もフリーソフトウェアとして配布しています。これは、作者のホームページ（あにねこ登山日誌）の山行記録に添えるルート地図を、少ない手間で見栄えよく表示したいという目的で開発しているものです。

このサイトの読者については、ハンディGPSとカシミール3Dの操作方法、および、ホームページ作成、HTML、JavaScriptについての基礎知識があることを想定しています。これらの知識については、必要に応じて他の情報源を参照して下さい。

このサイトと、このサイトで設置方法を説明するルート地図は、以下のブラウザで閲覧した際に（一部の不具合を除き）適切に表示されます。

• Windows：Internet Explorer 6以降とFirefox、Chrome、Operaの各最新版
• Mac：Safari、Firefox、Chrome、Operaの各最新版
• Linux：Firefox、Chrome、Operaの各最新版

このサイトの管理人の使用機材は下記のとおりです。主にこの環境で動作確認を行っています。

• メインPC：Apple Mac mini (Late 2014)、macOS High Sierra、Safari 11
• サブPC：Epson Endeavor TY5100S、Windows 10、Microsoft Edge、カシミール3D 最新版
• GPS：Garmin eTrex 20J

どんなルート地図ができるの？

図1に、様々な方式で設置したルート地図の表示例を示します。図1(a)は、カシミール3Dで作成したルート地図を画像ファイルとして出力し、HTMLのimg要素として表示したものです。トラックの往路を赤、復路を青に色付けし、ウェイポイントにアイコン画像を表示しています。

図1(b)は、ルート地図を構成するGPSデータ（トラック、ウェイポイント）をカシミール3DでGPX形式のファイルとして保存し、GPX2JSGIでKML形式に変換して、地理院地図に重ね合わせたルート地図です。比較のため、表示領域の画素数は図1(a)の画像の画素数に合わせてあります。また、同じKMLファイルをGoogleマップとYahoo!地図にそれぞれ重ね合わせたものが、図1(c)と図1(d)のルート地図です。

図1(b)〜(d)のルート地図では、マウス左ボタンを押しながら地図をドラッグすると、滑らかにスクロールさせることができます。また、(＋)、(−)ボタンをクリックしたり、マウスホイールを回転させると、地図のズームイン、ズームアウトができます。地図上のアイコンをクリックすると小窓がポップアップして、地名や簡単な説明が表示されます。種類の異なる地図や航空写真への切り替えも可能です。

各項目にあるルート地図ボタンをクリックすると、別ウィンドウを開いてルート地図を表示します。ウィンドウの大きさを変えると地図の表示範囲も追従して変化します。地図を見やすい大きさで表示することができ、大変便利です。

図1(b)〜(d)のルート地図は、地図上にGPSログを表示するだけの最も基本的な機能を実装した例です。この他にも、本サイトが取り扱う範囲を超えますが、設定と工夫次第で見栄えを変えたり、様々な機能を追加することができます。

図1 ルート地図の表示例

	(a) カシミール3D【解説本】2万5千地形図
	(b) 地理院地図版ルート地図（解説） ←ページ内表示｜別ウィンドウ表示→ルート地図
	(c) Googleマップ版ルート地図（解説） ←ページ内表示｜別ウィンドウ表示→ルート地図
	(d) Yahoo!地図版ルート地図（解説） ←ページ内表示｜別ウィンドウ表示→ルート地図

ルート地図の設置手順の概要

図2 ルート地図設置のためのデータ処理の概要

図2は、地理院地図を用いたルート地図を設置するためのデータ処理の概要を示したものです。

• ① GPSから軌跡データをカシミール3Dに読み込みます。
• ② カシミール3Dで軌跡データを編集し、ウェイポイント等を追加したのち、GPX形式で出力します。
• ③ GPX2JSGIを用いて、GPXデータを地理院地図で利用可能な上乗せデータ（KML形式）に変換します。
• ④ 上乗せデータを、FTPソフト等を用いて、ユーザサイトにアップロードします。
• ⑤ 地理院地図を呼び出すJavaScriptコードを記述したHTMLファイルを設置します。

以上でルート地図が完成します。Webブラウザで⑤のHTMLファイルにアクセスすると、国土地理院の地図サーバから読み出した背景地図データに上乗せデータを重ね合わせたルート地図が表示されます。

なお、GoogleマップやYahoo!地図を用いる場合も、JavaScriptコードの部分がそれぞれ異なりますが、データ処理の流れは基本的に同じです。

ルート地図の表示方式の比較

ルート地図の各表示方式をざっくり比較して表1に示します。

※1 山岳地帯の航空写真は未整備。
※2 複雑と言っても、HTMLファイルに定型的なJavaScriptコードを加えるだけです。
※3 GPX2JSGIを使えば簡単。手間はインストールだけです。
※4 APIキー、アプリケーションIDの取得（無料）が必要です。

リンク集

（115x40）

GPSと地理院地図の利用に関連する情報、活用事例へのリンクです（随時、追加中）。なお、当サイトへのリンクは御自由にどうぞ。リンクの際にもしバナーが必要でしたら、右のリンクバナーをご利用下さい。

• 地理院地図（電子国土Web）
  地理院地図についての詳細な情報は、ここの「技術情報」から入手できます。
• GPSウォーキング
  山行記録をGPSログと電子国土やGoogleマップを用いたルート地図で紹介しています。GPS活用方法についての情報も豊富です。
• 山歩き遊悠湯
  ヤマトタケルさんのHP。地理院地図やYahoo!地図を活用して、デザインの良いGPSマップを作成されています。
• 大子山岳会
  マーシーさんのHP。非常に研究熱心で、工夫を凝らしたサイトを作成されています。

更新履歴