leaflet入門|プラグインでツールバーを表示する(単一アイテム)

leafletのプラグイン「toolbar」を使用すると、地図にカスタマイズ可能なツールバーを表示することができます。

ツールバーは、単独のボタンのような動作や、ツールバーを展開して複数アイテムを表示することもできます。

今回は、単独ボタンのような動作について紹介します。
複数アイテムについては、次回紹介します。

実装すると以下のようになります。

 このボタンをクリックすると、指定した場所に地図が遷移します。

処理は自由に定義できるので、アラートメッセージを表示することもできます。

Demoを表示

全体のコード

解説

地図を描画するまでの解説は、leaflet入門1に記載しています。

Step1:ファイルの配置

Leaflet.toolbarの本体は GitHubからダウンロードできます。

GitHub-Leaflet.toolbar

GitHubから取得したcss・jsファイルを以下のように配置します。

index.html
css/leaflet.toolbar.css
js/leaflet.toolbar.js

Step2:プラグインの読み込み

Step1で配置した jsファイルを読み込みます。

また、今回はツールバーのアイコンに「Font Awesome」を使用するため、Font Awesome も読み込んでいます。

Step3:toolbarの設定

L.Toolbar2.Actionオブジェクトを拡張します。

ツールバーのアイコン・アクションを設定します。

options: { toolbarIcon: {}}

html:ツールバーに表示するアイコンもしくは、文字列を指定します。
tooltip:ツールチップに表示するメッセージを指定します。
className:スタイルを変更する場合は、適用するクラスファイル名を指定します。

addHooks: function () {}

アイテムがクリックされた際の処理を定義します。

これらの設定完了後に、L.Toolbar2.Control の actions に 拡張した「L.Toolbar2.Action」を指定します。

これで、ツールバーを使用することができます。次回は、ツールバーに複数アイテムを表示します。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする