地理院地図で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のファイルは次のエントリに分割します。