登山系ブログで使えるWordPress用GPSトラック(軌跡ログ)表示プラグイン

登山とITと

 

当サイトの山行記録でも使用しているGPSトラック(軌跡ログ)のマップ表示。Wordpressのプラグインを使用していますが、公式/非公式問わず実現してくれるプラグインの種類は多くありません(地図上にマーカーのみを表示するものは多い印象ですが)。

私自身、使えそうな(さらには見栄えの良い)プラグインを探すのに結構苦労したので、ここでまとめて紹介したいと思います。

ちなみに当サイトのWordpressはOSのインストールから構築しています。こちらも手順は確立していますが、もはやこのサイトに載せるレベルではないのでリンクだけ貼っておきます。ご参考までに。

 

最低条件から探し出したプラグイン3選

探していく中で、プラグインとして以下3点を最低限の条件としました。

 

プラグインとしての最低条件

  1. GPSトラック(軌跡ログ)を表示できること
  2. .gpxファイルに対応していること
  3. 公式プラグインであり、現時点でも開発が続けられていると思われるもの
  4. トラックと連動して標高/距離グラフを表示できること

 

①は言うまでもありません。
②は汎用性を考えるとやはり.gpxファイルに対応していないと正直厳しいです。kmlへの変換とかちょっとカンベン。
③は何だかんだ言って更新やメンテナンスを考えると公式プラグインであるに越したことはありません。またWordpress自体もv5.xがリリースされたことですし、現時点でも開発(アップデート)が続けられていると思われるもののほうが安心です。
④はやはりPHPを使ったサイトならではの醍醐味。これが不要なのであればプラグインは使わずカシミールなどのツールでトラックを赤線表示させ、キャプチャしていち画像として貼り付けるだけで十分です。

結果、使えそうなのは以下の3プラグインでした。

いずれもLeafletというPHPの地図表示ライブラリがベースになっています。それぞれのプラグインの機能・特徴をまずは概要レベルで見ていきます。ショートコードも記載しておきますので実装する際の参考にしてください。
※<pre>タグ使ってもショートコードそのまま書くとプラグインとして解釈されてしまうので、キャプチャにて貼付します。

WP-GPX-Maps

一番最初に見つけたプラグインです。なんと言ってもグラフが綺麗、これに尽きます。これに関しては標高以外の情報(距離・心拍数)を載せることでより顕著にわかると思います。

GARMINなどのデバイスでのGPSトラック取得を主眼にしているようで、心拍数にも対応しています。速度も表示できることから本来はロードバイク向けに開発されたものではないかと思われますが、登山でも十分使えます。

また、GPXファイルの専用管理画面が用意されているため、アップロード可能メディアのMIMEタイプなど気にする必要が無いのも◎です。

デフォルトでは国土地理院のタイルが使えませんが、これに関しては条件付きの解決策(※後述)があります。

ここがグッド!
  • 標高/距離グラフがとにかくクール
  • グラフに表示できる情報が多く透過表示で綺麗
  • GPXファイル管理画面が用意されている
ここがイマイチ!
  • マーカー表示ができない
  • 他のプラグインと同時に使用できない

 

LF Hiker

マーカーが表示できるということで、登山口や山頂などポイントになる箇所を示すことができたのはとてもよかったのですが、グラフのダサさが致命的でした。また、マーカー用の説明文字が「見出し3」として扱われてしまうため、記事先頭に表示する目次にて、表示段落を「見出し2まで」にする必要があったのもちょっとした残念項目。さらにマーカー位置は緯度経度の情報を指定する必要があり、この情報をいちいち取得するのがとても手間です。後述のLeaflet Mapプラグインのヘルパー機能を使うと多少運用がマシになります。

また、GPSトラックデータをメディアとしてアップロードする必要がありますが、最近のWordpressはデフォルトで.gpxファイルのアップロードができないため、アップロードを許可するファイルのMIMEタイプ制限を緩めるプラグインなどが別途必要になってしまいます。

デフォルトでは国土地理院のタイルが使えませんが、こちらも条件付きの解決策(※後述)があります。

ここがグッド!
  • マーカー表示が可能
ここがイマイチ!
  • 標高グラフがダサすぎる
  • マーカーが「見出し3」扱いされる
  • GPSトラックデータをメディアとしてアップロードする必要がある

 

Leaflet Map

このプラグインは標高/距離グラフは表示できないので最低条件④をクリアしていません。ただしWordpressの設定画面から容易に地理院タイルを指定することができるため、当初山行ルート紹介用に補助的に使用していました。

残念なのが初期表示位置や初期ズーム値を個別に(ショートコード内に)指定しなければならないところ。ヘルパーツールを使って緯度と経度の情報は簡単に出せるものの、最終的には何度か微調整が必要で、この作業がかなりストレスになります。

ここがグッド!
  • 簡単に国土地理院タイルが使える
ここがイマイチ!
  • 初期表示位置(緯度と経度)や初期ズーム値を指定する必要がある
  • GPSトラックデータをメディアとしてアップロードする必要がある

 

各プラグインの比較と混在時の注意

どのプラグインも良し悪しがあり、どれが一番というものはありません。以下に各プラグインの機能を確認できた範囲で記しておきます。自サイトに一番合ったプラグインを選択されるのが良いと思います。

個人的には各表の印がそれぞれのプラグインの一番のウリではないかと思っています。

また、これらのプラグインはそれぞれ相性があり、残念ながらすべて混在させる(同時に有効にする)ことができませんので、そちらもご参考までに。

比較1:機能面

プラグイン トラック
表示
グラフ
表示
統計情報
表示
表示位置
自動調整
ズーム
自動調整
マーカー
表示
地理院
タイル
(1) WP-GPX-Maps × △(※1)
(2) LF Hiker △(※1)
(3) Leaflet Map × × × ×

※1:PHPソース修正で利用可

 

比較2:デザイン・運用管理面

プラグイン グラフ美麗度 GPXファイル
管理UI
混在
(1) (2) (3)
(1) WP-GPX-Maps × ×
(2) LF Hiker × × ×
(3) Leaflet Map × ×

※2:LF HikerとLeaflet Mapdeで同時にマップを表示する場合、gpxファイル同時に2プラグインのソースとして指定することができません。

各プラグインで国土地理院タイル(地図データ)を使う方法

プラグイン探しの上で国土地理院タイル(地図データ)を使えるかどうかというのは結構大きな要素でした。やはり山ヤはみんな最終的には国土地理院の地図を見ることが一番安心するのです。しかしながらプラグインは海外のプロジェクトで開発されたものばかりなので、IT後進国(断言します)の日本の地図タイルなんぞ見向きもされないわけです。

ところがこれらのプラグインで最もよく使用されているOpenStreetMap(OSM)は日本語情報も少なく、また登山に特化したものではないので標高も見にくく登山系ブログで使用すると少々見た目がチープになりがちです。そこで、ここでは各プラグインで国土地理院のタイルを使う方法を残しておきます。

WP-GPX-Maps

WP-GPX-Mapsで地理院タイルを使うには直接PHPソースを修正する必要があります。なので利用しているWordpress環境で直接的ないし間接的にPHPファイルを編集できない場合は、この方法は実施できません。

編集ファイルは2つで、管理画面向けファイルと実際のマップ表示用ファイルです。

まずは一つ目。管理画面向けPHPファイルです。ドキュメントルート配下、/wp-content/plugins/wp-gpx-maps/wp-gpx-maps_admin_settings.phpの230行目あたり。この修正で、管理画面における地図タイル選択メニュー内容が地理院向けのものになります。

[変更前]
baseMaps["Hike & Bike"] = L.tileLayer('http://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png', {
baseMaps["Open Sea Map"] = L.tileLayer('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {

[変更後]
baseMaps["地理院タイル - 標準"] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
baseMaps["地理院タイル - 航空写真"] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {

 

続いて二つ目。マップ表示用のPHPファイルです。ドキュメントルート配下、/wp-content/plugins/wp-gpx-maps/js/WP-GPX-Maps.jsの430行目以降。この修正により、「Hike & Bike」は「地理院タイル(標準)」に、「Open Sea Map」は「地理院タイル(航空写真)」に変わります。Hike & BikeやOpen Sea Mapも使用したいという人は他のマップを地理院タイルに差し換えてください。

[変更前]
  baseMaps["Hike & Bike"] = L.tileLayer('http://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png', {
  baseMaps["Open Sea Map"] = L.tileLayer('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {

  baseMaps["Hike & Bike"].addTo(this.map);
  baseMaps["Open Sea Map"].addTo(this.map);

[変更後]
  baseMaps["地理院タイル - 標準"] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
  baseMaps["地理院タイル - 航空写真"] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {

  baseMaps["地理院タイル - 標準"].addTo(this.map);
  baseMaps["地理院タイル - 航空写真"].addTo(this.map);

 

LF Hiker

LF HikerもWP-GPX-Mapsと同じく直接PHPソースを修正する必要があります。なので直接的ないし間接的にPHPファイルを編集できない場合は、この方法は実施不可です。

編集ファイルはドキュメントルート配下、/wp-content/plugins/lf-hiker/Model/Map.phpの45~46行目あたりになります。

タイルの指定変更と、コピーライト表示の変更です。

[変更前]
'url'           => '//server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
'attribution'   => 'Tiles c <a href="https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer">ArcGIS</a>',

[変更後]
'url'           => '//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
'attribution'   => 'Tiles c <a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>',

 

Leaflet Map

Leaflet MapはWordpressの管理画面から指定が可能なので最も簡単で、直接PHPファイルを編集できない環境にある人にとっては唯一プラグインで地理院タイルを使える方法となります。

管理画面のメニューから「Leaflet Map」をクリックし、右側ペインに表示される設定項目内の「Map Tile URL」に以下のURLを指定します。

https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png

これだけでOKです。また、ショートコードでもtileurlプロパティを指定して、表示する地図ごとにタイルを指定することも可能です。

 

最終的に採用となったWP-GPX-Maps

WP-GPX-MapsやLF Hikerは当初、地理院地図のタイル指定方法がわからなかったためLeaflet Mapを使用していました。ですがやはり標高グラフ等は表示したかったので、タイルはOpenStreetMapに甘んじてLF Hikerを同時に使いました(WP-GPX-Mapsは混在がNGだったので)。

ところがLF Hikerに続きWP-GPX-Mapsで地理院タイルを使えることが判明してからはWP-GPX-Mapsのみになりました。グラフが綺麗であることに加え、GPXファイルの管理のしやすさや、ショートコードのシンプルさなど、やはり運用上とても使いやすかったことが大きな要因です。

WP-GPX-Mapsはマーカーを使えません。それほど大きな問題ではないのですが、やはりルート上のポイントはプロットしたいと思っていました。ルート紹介はNHKのTV番組『日本百名山』の冒頭で流れる3D映像でのルート紹介みたいなのができればカッコいいなぁと思っていましたが、さすがに3Dとなるとプラグインでは限界があるので、カシミール3Dのカシバード機能を使い、それをキャプチャするだけで十分かな、となって現状の運用体制となりました。

なかなかニッチなニーズなのかプラグインの数は決して多くはありませんが、ご参考になれば幸いです。

2 件のコメント

  • やっぱりWordPressが使える知識があるといいですね~
    私は興味がありつつも・・・そこまでは手が出せずにいます。
    エキサイトブログではそこまでの自由度が無く、ヤマレコの地図さえもリンク出来ない仕様です。
    色々と不満もあるのですが、やはりコミュニティが確立しているために見てもらえたり交流しやすいという面が大きいです。
    後、エキブロを選んだのは、月額課金をすればデータの上限が無くなり、無制限に写真をUP出来るという事でしょうか。
    しかし・・・いつかはやっぱり自分自身で作ったサイトを持ちたいものですね。
    その時は、大いに参考にさせてもらいたいと思います^^
    このような詳細なレポは非常に貴重なものだと思います。
    ありがとうございました。

    • Hideさん、いつもありがとうございます^^
      職業柄オープンソースのCMSには数多く携わっていますが、特殊な用途でなければやはりWordpressが一番だと思います。
      ヤマレコのような目的がはっきりしたSNSではアウトプットできる内容も限定的ですので、私のようにあれやこれやとなって来るととても窮屈に感じてしまうんですよね。
      半分はSNS疲れでブログを始めたようなものなので、誰かに見てもらいたいというよりは自分のアウトプットに共感してくれた方とじっくり深く語り合えれば嬉しいかな、といったところでしょうか。自分の知見の整理としてのアウトプットであるのと同時に、登山と写真が好きで子連れ登山にも興味を持っている人へのモチベーションに少しでも繋げられることをKPIにしちゃっているようなところがあるので、雑記ブログにはせず特化ブログにしていきたいと思っています。ゆえに更新頻度も少ないのですが、そこそこニッチなキーワード検索によるPVもお陰様で増え始めてきました。
      エキサイトブログには課金によるリミッター解除があったのですか・・・私のように自宅サーバで容量制限無縁でサイトを運営する人間には一番合わないかもしれません(笑)
      HideさんがもしWordpress始められるようでしたらぜひウチの環境で色々遊んでお試しくださいませ^^

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください