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の設定

複数アイテム(サブツールバー)を使用する場合は、以下の流れで実装します。

<実装の流れ>

1.サブツールバー用のアクションオブジェクトを作成して、各アクションを登録。

2.メインツールバーに、サブツールバーを登録します。

TbSubAction = L.Toolbar2.Action.extend({});

サブツールバー用に、L.Toolbar2.Actionオブジェクトを拡張します。
このオブジェクト使用して、サブツールバー用のアクションを定義します。

var TokyoTower = TbSubAction.extend({});
var GitHub = TbSubAction.extend({});
var Cancel = TbSubAction.extend({});

サブツールバーのアイテムごとにアクションを定義します。

var TbMainAction = L.Toolbar2.Action.extend({});

メインツールバーのオプション「subToolbar」にサブツールバーの各アクションを登録します。

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

これで、複数アイテムをもつツールバーを使用できます。

スポンサーリンク

シェアする

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

フォローする