地理院地図でkmlを使わずにExcelデータから複数のマーカーをプロット(1)

電子国土から地理院地図へ移行

したのが、もう半年以上も前のことでした。
今後は電子国土プラグインのサポートもされないということなので、以前に作ったプラグインバージョンの地図アプリケーションを地理院地図対応へバージョンアップする必要が生じました。電子国土プラグインはAPIも整備されており開発しやすかったのですが、今後の地理院地図ではAPIは提供されず、オープンソースのライブラリ(Openlayers や Leafletなど)を用いて開発しなければならないようです。

以前に作ったアプリケーションの一つの機能として簡単なものですが、複数の位置情報を地図上にプロットするというものがあります。Webアプリケーションならサーバー任せでkmlファイルを作って表示させれば良いと思いますが、ユーザーが使うExcelのデータを簡単にプロットできる方法はないかと考えていました。

Excel側でデータを変換しkmlファイルを作ってサーバーにアップロードして…というのも考えましたが、検討したところkmlを使わずにもっと簡単な方法でできることがわかりました。

マップ用のHTMLを準備

サーバーに設置するマップ用のHTMLファイルを作成します。セオリーは公式サイトに記載されていますので、これを参考にします。

1~6行目 Openlayersのライブラリ指定など

冒頭部分では、metaタグやタイトルを設定するほか、用いるOpenlayersライブラリを指定します。公式のアドレスを指定しておけば安定版の最新版を常に使えます。

8~21行目 スタイルの指定

地図描画範囲などのスタイルを指定します。
11行目からのdiv.olControlAttributionは、国土地理院の著作権表示用のスタイルです。

23~30行目 マップ表示用スクリプトの作成開始

24行目からはグローバル変数の宣言をしています。
24行目:地図の実体。initが実行されるまではnullにしておきます。
25行目:地図投影に真球疑似メルカトル投影を使用
26行目:地図表示に経緯度を使用
27行目:マーカー表示用のレイヤ
28行目:マーカーの表示サイズ。pngの実際のサイズと一致していなくても可
29行目:マーカー表示のオフセット位置。左上を原点としているので、ピン形状など下中央を中心座標とする場合は、幅の半分と高さの分をマイナスで指定します。
30行目:地図の表示範囲用の境界

32~50行目 地図の初期化

34〜38行目:地図インスタンスを生成します。後でbody内に出てくる div id=”map” の場所に挿入されます。また、前述で定数定義した地図投影と地図表示を指定します。
40〜44行目:生成した地図に地理院地図をベースレイヤとして追加します。42行目は著作権表示しています。
46〜47行目:指定の緯度経度を表示の中心に指定します。
49行目:マーカー用のレイヤを重ねます。

52~61行目 マーカー配置関数

Excelから実行する関数を定義します。
引数 lon:経度, lat:緯度, ico:アイコンのパス(Excelから指定)
53〜55行目:アイコンとその位置情報(投影を反映して変換)を設定します。
56行目:マーカーを配置します。
57〜58行目:表示領域をそのアイコンの座標を含めて拡張し、その領域にズームします。

62行目〜66行目 body部分

62行目:bodyが表示されるときに、初期化関数initが呼ばれるようにします。
63〜64行目:地図領域と説明領域を指定します。

Excelのファイルは次のエントリに分割します。

関連記事