電子国土WEBマップ表示用WordPressプラグイン

　

[gpsmap provider=”CJ” src=”https://y2works.net/trip/wp-content/uploads/Data/MiyagaseNov06/MiyagaseTrailNov06.gpx” delta=50 smooth=5 chart=”distance” ngg_gallery=136 ]

---

先の記事で電子国土WEBマップ上にGPSのトラックデータを表示する単純なプラグインを作成したことを紹介したが、開発が多少進んで大まかな骨格部分ができあがったので概要を紹介することにする．全体としてはまだ3割程度の完成度なので、今後機能の追加やドキュメントの作成などを行っていく予定だ．

WordPressのプラグインなので、一般の人達が使いこなせるものとも思えないので公開するかどうか迷っているが、公開前でも是非とも使って見たいという方は連絡頂ければソースコード一式を送ります．

今回高度・スピードグラフの表示に、”dygraphs JavaScript Visualization Library” というJavascriptベースのライブラリを使っていたが、”canvas” に対応できないInternet Explorer での動作が不安定なため、”Highcharts” という別なグラフライブラリに切り替えた．

スピードのグラフに関してはGPXファイルの規格自体に各トラックポイント毎のスピードを記録する正式な項目が無いので、GPXファイルによってはスピードの記述が無かったり、スピードの記述があってもExtension項目に記述しているなど、各GPSファイル毎に記述方法が異なっている．また、スピードが記録されていても時速[km/h]だったり、秒速 [m/s] だったりしているので縦軸の単位を記載することができない．

スピードに関するデータは人間がデータを見て判断するしか方法は無さそう．myTracksの場合は時速で記述されているが、GPSBabelでは秒速のようだ．秒速の場合、 1 [m/s] が 時速では 3.6 [km/h] に換算されることになる.

グラフの横軸は、距離ベースと時間ベースの両方を選択できるようになっている．

【現時点での不具合】

・FireFox ではグラフのレイアウトが崩れてしまう現象が生じていたが、とりあえずグラフ描画ライブラリ側（dygraph-combined.js）のソースコードに追加のコードを挿入することで何とかレイアウト崩れを修正した．何故FireFoxだけが影響を受けるのかはまだ謎のまま．

　・このブログをホスティングしているレンタルサーバとの相性があるみたいで、地図の初期画面（日本全土の縮尺マップ）しか表示されない場合がある．何度かリロードするときちんと表示されるようになるが、現時点では原因を特定できていない．手元にあるローカルサーバではこのような現象は起きないので、レンタルサーバ側で何か特殊なコンテンツキャッシングが行われているのかもしれない．．

　→　どうやら外部のレンタルサーバからクライアント側にデータが送られてくるタイミングや遅延などの影響で、地図のレンダリングが正常に完了しない場合がある模様．地図レンダリングのメイン関数”appmain()” の実行を window DOMの準備完了後に行うように変更することで、地図レンダリングの不安定さを解消した．

　　　

　・dygraphs JavaScript Visualization Library がInternet Explorerでエラーを起こしてしまい、上手くグラフが表示されないん．
　　→　グラフチャートのJavascriptライブラリを”Highcharts JS” に変更．


　・電子国土のJavascript ライブラリ “http://cyberjapan.jp/webtis_limited.js”のWEBブラウザの判定部分が不完全で、Google Chrome が Safari と認識されてしまう．このため3959行目にあるgetElementsByName( ‘map’ )の部分が、iframe タグに’map’ 以外の 名前を付けているとエラーとなってしまう．’map’という固定された名前を前提にプログラム作られているのが問題．とりあえず、iframe タグに’map’ という名前を付けることでエラーは回避できるが、その代わり同一ページに複数の地図を表示させることができなくなってしまった．

	case 'sa':
	　if ( LT_P.gBrowserVersion == '0' )
	　　　{
		parent.document.getElementsByName( 'map' )[ 0 ].onmousewheel = LT_P.DoMouseWheel;
	　　　}

指定可能なオプション（一部）

　・interval   トラックポイントの数が多すぎる場合に、間引く間隔を指定する．
　　　　　　　　　interval=2 で1個おきにサンプリング
　・delta　　 　間引く間隔を距離[m] で指定する．
　　　　　　　　 delta=50 で約50m以上離れたポイントのみを選択の対象とする．

　・map_center　マップの初期表示の中心をどこに持って行くかを指定する
　　　　　　　　　"average"  全てのトラックポイントの加重平均（重心）
　　　　　　　　　"bounds"　トラックポイントの外接矩形枠の中心
　　　　　　　　　"peak"　　トラックポイントのうちの最高標高点
　　　　　　　　　"start"　　トラックポイントの開始点
　　　　　　　　　"middle"　全てのトラックポイントの中間点
　　　　　　　　　．．．

　・marker_type　トラックポイントをつなぐ方法
　　　　　　　　marker_type="line"   直線でつなぐ　　"dot"  点でつなぐ

　・smooth　  グラフのスムージング（移動平均のサンプル数）
　　　　　　　 smooth=5   対象点の前後5点 +1 の平均を取る （ 2n+1点）
 　　　　　　　[ i-5, i-4, ... , i, i+1, i+2, ... , i+5 ]
　　．．.