Leafletで作るWeb地図とプラグイン

Leafletとは

Leafletとは、Openlayersと同じように地図を表示するためのJavaScriptのオープンソースライブラリです。

これまでOpenlayersに関する研究を主にしてきましたが、Leafletは地理院地図にも採用されているように、近年、地図ライブラリの業界標準的な位置づけにあります。というわけで、少し勉強してみました。

Leafletで作るWeb地図

Demo

Leaflet公式サイトのTutorialsがやはり参考になります。Leaflet Quick Start Guideより背景地図とマーカーを地図上に表示。Layer Groups and Layers Controlを参考に、背景地図に航空写真等を追加。

プラグイン

Leaflet用のプラグインを使って地図に機能を追加します。プラグインは公式サイトに多数紹介されていますが、英語なので困っていると、まとめてくださっている方がいらっしゃいました。ありがたいことです。

その中から、今回は次のプラグインを実装してみました。

Demo

Leaflet_plugin

Leafletのプラグイン

leaflet.zoomhome

設定したホーム(緯度経度)に戻れるホームボタンを追加するプラグイン。戻ったときのズームレベルも設定できる。

Leaflet-Minimap

ズームレベルにして2つくらい引いた地図を案内図のように表示するプラグイン。拡大したときの位置が把握しやすくなる。

Leaflet.MeasureControl

クリックした地点間(複数地点も可)の距離を計測するプラグイン。

プラグインを追加する時の注意点

プラグインだけでなく、javascriptで記述するとき一般に当てはまることなのですが、「書く順序」がとても大切です。ウェブブラウザは先に書いてあるものから順に読み込んで実行するというわけですね。

今回、MeasureControlというプラグインはJavascriptファイル(.js)を2つ読み込まなければなりませんが、その書く順番を間違えると動きません。

measurecontrol_error

jsファイルを読み込む順序を間違えるとエラーが出る(Firefoxにて)

Demoページのソースにあるように、leaflet.draw.js→leaflet.measurecontrol.min.jsの順序で書かなくてはなりません。これを逆にすると、上図のように「そんな関数(メソッド?)は存在しません!」といった感じのエラーとなるので要注意。

measurecontrol_index

jsファイルを読み込む順序に要注意(htmlファイルでの記述)

組み込んだプラグインが動かないなあと思ったら、「書く順序」を見直すという教訓を得ました。

(式)

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中