スマホ向けのコンパクトスタイルで表示しています。

2012/08/26 作成、2019/08/29 更新

タイトルタイトル

走行ルートを地図に描こう!

走行ルートのマップ表示例(四国一周ツーリングの場合)

みなさんは、地図が好きですか?

私は好きです。もちろん、見るのも好きですが、地図上に自分が走ったルートを記録するのが好きです。ここでは、そんな走行ルートの記録と表示に関する話について、ツールの紹介を交えて書きつづりたいと思います。

これまでに日本全国で走行したツーリングのルートをGPX Editor and Viewerを用いてGoogle Mapsに表示した例

私はツーリングルートを GPX形式のデータで保存しています。ただし、GPSは使っていません。ツーリングから帰ってきたら地図上にゴリゴリとルートを記録しているだけです。

左の画像は、Googleマップを使ってこれまでに走行した全ツーリングのルートデータを表示した画面です。こうして俯瞰で眺めるとまだ走っていないところが一目瞭然ですね。この地図を眺めながら次のロングツーリングはどこへ行こうかな~、なんて考えています。GPXは、ツーリングプランの作成にも役に立ちます。

次の章では、このルートマップの作り方を紹介します。

走行ルートデータの作成方法

走行ルートデータを作成して地図上に表示する方法

以前は、Yahooルートラボで作成したルートデータを GPX Editor and Viewer で編集していました。しかし、2020年 3月末にYahooルートラボがサービス終了するため、現在は GPX Editor and Viewer(GPXEV) のみでルートを作成・編集しています。

GPX(GPS eXchange Format)は、XMLで記述された汎用的なルートのデータフォーマットです。

YahooルートラボとGPXEVの互換性については、こちらのページ をご参照ください。

GPXEVの基本操作

1.trackの新規作成

GPX Editor and Viewerのツールバーに表示されているルートリストアイコン

GPXEVで新規にルート作成する方法を紹介します。

まず、ツールーバーからルートリストアイコンをクリックします。

Route ListダイアログのAppendボタン

Route ListダイアログのAppendボタンをクリックしてルートを追加します。

GPXのtrk、trkseg、rte、wptをそれぞれ作成するためのメニュー

サブメニューが表示されたら、Track(trk)、Route(rte)、Waypoints(wpt)のいずれかを選択します。

Track(trk)は、実際に走行したルートです。下位に複数のtrksegを作成することができます。

Route(rte)は、一般的に机上で作成したルートです。予定ルートなどに使用します。

Waypoints(wpt)は、個別のWaypointです。線(ルート)ではなく点(座標)で表現するため、注目すべきスポットの記述に利用できます。

Route Listダイアログに新規のtrkとtrksegを追加した画面

試しに、1つのTrack(trk)とその下に1つのtrksegを作成しました。ルートを編集するために、trksegをクリックして選択した状態にします。

2.waypointの作成

GPX Editor and Viewerのツールバーからルート編集アイコンをクリックする

GPXのルートは、Waypoint(経由地点)の集合で表現します。ツールーバーからルート編集アイコンをクリックします。

GPX Editor and ViewerのRoute Editダイアログの説明

ルート編集モードになると、Route Editダイアログのみが表示されます。まず、"along the road"ボタンをONにします。これで自動的に道路に沿ってルートを作成することができます。これは、Yahooルートラボの「道ピタモード」に相当する機能です。

一番左のADDボタンをクリックするとaddモードになり、初期状態からルートを作成することができます。

GPX Editor and Viewerで編集中のルート

あとは、Googleマップ上をクリックすると、ルートを作成することができます。間違えた場合は、ルートの線をクリックしてから菱形のCurrent Waypoint Markerをドラッグアンドドロップすることで、修正することができます。ルートの作成が完了したら、Route Editダイアログを閉じると通常モードに戻ります。

3.ルートの保存

GPX Editor and ViewerのツールバーのGPXファイル保存アイコン

作成したルートを保存する場合は、ツールーバーからGPXファイル保存アイコンをクリックします。

GPXファイルをローカルシステムに保存する操作

Save GPX Fileダイアログが開いたら、"GPX File"ボタンを右クリックして「名前をつけてリンク先を保存」を選択します。これで自分のパソコン上にGPXファイルを保存することができます。もし、作成したルートを再編集する可能性がある場合は、Optionダイアログをクリックして、"waypoint lock status"のチェックボックスをチェックすることをお勧めします。

GPXファイルのサンプル

実際に保存したGPXファイルを開くとこんな感じです。この手順では、Waypointの座標のみが出力されていますが、名称、コメント、作成日時、通過日時、リンク画像、連絡先などのメタ情報も追加することができます。

ここで紹介した機能は、最低限の基本操作のみです。詳しいGPX Editor and Viewerの使い方は、以下のバーナをクリックして、ユーザガイドを参照してください。質問がありましたら、左のメニューのGuestBookに書き込んで頂いても構いません。

GPX Editor and Viewerのバーナ

作成したルートを公開する

Googleマップ上で作成したルートを一般に公開する方法

作成したルートは、一般に公開することができます。あなたのウェブサイトにGPXファイルを置いて、GPX Viewer Liteの引数にURLを指定することで自動的にGoogle Maps上にルートを描画することができます。

この時、注意事項があります。GPXファイルが置いてある、あなたのサイトはCORS(Cross-Origin Resource Sharing)を許可している必要があります。CORSは、簡単に説明すると「サイトAのJavascirptでサイトBのデータにアクセスしても良いよ」という設定ができます。つまり、Javascriptを悪用させないための仕組みです。

以下に、apacheでCORSを許可する方法を示します。

  1. GPXファイルが置いてあるディレクトリに .htaccess を作成します。
  2. .htaccess に以下の1行を追加します。

    Header set Access-Control-Allow-Origin "https://askz.sakura.ne.jp"

    あなたのサイトがSSL(https)に対応していない場合は、"http://askz.sakura.ne.jp" を設定してください。無料ホームページの場合は、ここまで設定すればOKです。
  3. 自分でサーバを構築している場合は、ここから先の手順も必要です。headers_moduleを無効化(コメントアウト)している場合は、httpd.confの "headers_module" の行頭の "#" を削除します。

    LoadModule headers_module modules/mod_headers.so

  4. FileInfoの上書きを許可していない場合は、httpd.confの "Directory" セクションに "AllowOverride FileInfo" を設定します。

    <Directory "/xxx/xxx/xxx">
        ・・・
        AllowOverride FileInfo
        ・・・
    </Directory>

  5. apacheを再起動します。
GPX Editor and ViewerのツールバーのCGIパラメータアイコン

GPXファイルを開くためのURLを生成します。

ツールバーのCGIパラメータアイコンをクリックします。

GPX Editor and ViewerのCGIパラメータダイアログ

以下の手順でURLを生成します。

1段目のApplicationで "Viewer Lite" を選択します。Lite版は、編集機能が無い、GPXファイルのビューアです。

2段目のGPX URLにGPXファイルのURLを指定します。

必要に応じて、3段目にGoogleマップの初期表示座標とズーム率をセットします。

下段のテキストエリアにURLが表示されます。このURLをあなたのホームページでご使用ください。あなたのサイトがSSL(https)に対応していない場合は、URLの "https" を "http" に書き換えてください。

無料のオンラインストレージサービスは、ほぼ使えません。無料のホームページは、.htaccess が使用できるサイトが幾つか存在しますが、ここでは XFREE を紹介します。実際に、XFREEのホームページを使用してルートデータを公開する サンプルページ を用意しました。

利用可否
無料
オンラインストレージ
Google Disk⨯:CORS非対応
Dropbox⨯:CORS非対応
無料
ホームページ
Google Sites⨯:.htaccess設定不可能
XFREE◯:.htaccess設定可能(動作確認済み)

Copyright © 2006-2020 KaK.

このページに掲載されている画像の転載は、再配布条件 をご参照ください。