本文へスキップ

東京の山・神奈川の山・関東周辺の山を夫婦で「気ままに山歩き」登山・ハイキング・トレッキングの山行記録です。

地理院地図にスマホGPSログ表示地理院地図にスマホGPSログ表示



地理院地図にスマホのGPSログを表示する 平成30年(2018)1月23日

スマートフォンの登山用GPSアプリは色々あるが、以前良さそうなGPSアプリを使ってみた。しかし使い勝手が今いちピンとこなかった。それなので8年前に購入した古いガーミンのハンディGPSを使い続けていた。ところで最近スマホ用GPSにジオグラフィカ(Giographica)というのが有ることを知り、街歩きやハイキングなどで試していた。使ってみると今までにない使いやすいスマホ用GPSだと感じた。そこで先日、スマホでルートを作り秦野の弘法山を歩いてGPSの記録を取った。その時のトラックログ(GPS軌跡、GPSログ)を地理院地図(地形図)に表示してみる。

登山や山歩きでスマホGPSを使用してルートや現在位置を確認することは道迷いの防止になります。もう一つの使い方としてGPSログで歩行記録をヤマレコへ投稿したりホームページやブログに掲載できます。自分が歩いたり迷ったりした記録を見て確認したり反省もできます。GPSログで歩行記録をただ見るだけでなく、テキストやマーカー(ウェイポイント)などを地理院地図に表示させることも可能です。そうすれば登山記録をもっと正確に伝えることができるでしょう。またGPSログを元にルートマップを作成すれば地図に新しい情報が加えられます。ホームページやブログを見るユーザーにも詳しい情報が伝えられます。地理院地図ではGPSログにテキストやマーカーを容易に表示できます。

スマホのGPSアプリ、ジオグラフィカを使って登山をしたトラックログ(GPS軌跡、GPSログ)がスマホ内にあるものとします。ここでは2018年1月14日に歩いた秦野・権現山~弘法山~吾妻山で説明します。
スマホでジオグラフィカを立ち上げます。左上の「メニュー」ボタンをタップします→「ファイル」→「トラック」→エクスポートしたいトラック名(ここでは「秦野・弘法山」)をタップしてチェックマークを付けます→左下の「チェックマーク」ボタンをタップします。

KMLエクスポートをタップします。アップメニューが出ます。
ここではGmailでメールを送るので「Gmail」をタップします。

「作成」画面で「From」に「スマホからの送信メールアドレス」、「To」に「パソコンの受信メールアドレス」、「件名」に「コース・ルート名:ここでは秦野・弘法山」を記入して右上の「送信」ボタンをタップして送信します。
・パソコンのメールソフトを立ち上げ、スマホからのメールが受信されていることを確認します。
・受信メールの添付ファイルを右クリックして「名前を付けて保存」からPC内のフォルダに保存します。
・ここでは「log」フォルダを作成してその中に保存しました。

地理院地図の「作図・ファイル」ダイアログ

パソコンでブラウザを立ち上げ地理院地図を開きます。右上の「機能」ボタンをクリックします。「ツール」→「作図・ファイル」ダイアログで左端の「ファイルから読み込み」をクリックします。
ダイアログの表示が「KML,GeoJSON,TopoJSONファイルを選択してください。※ファイルを地図上にドラックドロップすることでも読み込めます」が表示されます。ここでは「参照」ボタンをクリックします。
・「アップロードするファイルの選択」ダイアログが表示されます。
・上記の「log」フォルダ内に保存したトラックログのKMLファイルをダブルクリックします。
・「作図・ファイル」内に読み込まれますので、「読込を開始」ボタンをクリックします。
・「編集」をクリックすると地図上のGPSログのルート内が赤点線で囲まれます。
・地図上に表示されたルート(歩いたコース)をダブルクリックします。
・画面が拡大表示され、「作図・ファイル」で線幅、線色、線の透過率、名称などが変更できます。
ここでは線幅を3px、線色を赤にしました。
・「確定」ボタンをクリックします。
・「編集終了」ボタンをクリックします。元の「作図・ファイル」ダイアログに戻ります。
・「TEXT」ツールで分岐点や地名などを入れていきます。
・「作図・ファイル」の「TEXT」をクリックしてから、地図上のテキストを入れる場所にマウスのポインターを移動してクリックします。
・次に「作図・ファイル」ダイアログにテキストを入れ、文字サイズや色などを指定します。
・ここでは文字サイズを12として太字、青色としました。必要なだけ同様の操作をします。
・次に左から3つ目の「マーカー(アイコン)」をクリックして地図上の入れたい場所をクリックします。・マーカーが地図上に挿入されますので、「作図・ファイル」内に「名称」に記入します。
・この「名称」は実際の地図が表示されたときクリックすると「名称」に入れたテキストが表示されます。
必要なだけ同様の操作をします。ここではテキストを9か所、マーカーを4か所入れました。
・すべてが挿入出来たら「作図・ファイル」の×印をクリックして終了します。


次にhtmlファイルの作成です。地図が表示されている状態でhtmlファイルが作成されますので、
・地図の表示が1番いい状態になるように移動配置します。
・ここでは出発地点の秦野駅が左端に入る様に地図を移動しました。
・再度「機能」から「ツール」→「共有」→「名前を付けて一時保存」ダイアログで「上記のHTMLを保存」をクリックします。


・上図のようにパソコン画面下に通知バーが表示されるので「保存」→「名前を付けて保存」をクリックすると「名前を付けて保存」ダイアログが表示されるので適当なフォルダに保存します。
・この時のファイル名は「gsi20180123145653515.html」で、「log」フォルダ内に保存しました。
・このhtmlファイルをHPのサーバーにアップロードします。
・ここでは「http://www.yamaaruki.biz/」内の「log」フォルダにアップロードしました。
・従ってリンク先は「http://www.yamaaruki.biz/log/gsi20180123145653515.html」になります。

クリップボードにコピーしたタグを埋め込んでも作図結果は表示されない

次に地図をサイト内に埋め込む場合です。再度「機能」から「ツール」→「共有」→「サイトに埋込」→「ウェブサイトに埋め込む」ダイアログで次のように表示されています。
次のタグをHTMLファイルに加えることで、地理院地図をウェブサイトに埋め込むことができます。
※作図結果は反映されません。作図結果は、作図・ファイル機能を使ってファイルに保存して共有することをおすすめいたします。

・「ウェブサイトに埋め込む」ダイアログで「クリップボードにコピー」をクリックします。
・コピーしたタグをHPに埋め込むと上記のように表示されます。作図結果は反映されていません。
・クリップボードにコピーしたタグが下記です。

<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
width="500" height="400"
src="https://maps.gsi.go.jp/?hc=hifc#16/35.373033/139.240712/
&base=std&ls=std&disp=1&vs=c1j0l0u0t0z0r0f0
"></iframe>

そこで作図結果が反映されるように次のように変更します。width="500" は地図の幅「500」ですが、これをサイトに合うサイズに変更します。またはスマホでも適切に表示されるようにするにはwidth="100%" に変更します。つぎに赤字の部分を最初に作成したログファイルのリンク先、ここでは
「http://www.yamaaruki.biz/log/gsi20180123145653515.html」に変更します。
するとクリップボードにコピーしたタグは次のように変更されます。このタグを埋め込むと作図結果が反映された地理院地図が表示されます。

<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="100%" height="400" src="http://www.yamaaruki.biz/log/gsi201801
23145653515.html"></iframe>


バナースペース

https://www.ov2.yamaaruki.biz/
スマートフォン対応