leaflet入門|プラグインでフィルターボタンを追加する(L.tagFilterButton)

leafletのプラグイン「L.tagFilterButton」使用して、マーカーのフィルタリングを行うボタンを追加します。

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

【フィルタボタンを追加】

拡大・縮小ボタンの下にフィルタボタンが追加されます。

フィルタボタンをクリックすると、選択候補が表示されます。

Demoはこちらです。

全体のコード

解説

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

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

L.tagFilterButton では、本体と「Leaflet.EasyButton」プラグインの読み込みが必要になります。

それぞれ、GitHubからダウンロードできます。

GitHub-L.tagFilterButton

GitHub-Leaflet.EasyButton

Leaflet.EasyButton 単体での使い方は、こちらになります。

Step2:フィルタ対象データの定義

表示するマーカーのオプションに、tags を追加します。tagsで設定したキーワードでフィルタリングすることができます。

tagsは配列で定義するので、1つのマーカーに複数のキーワードを設定することができます。

 Step3:フィルタボタンの定義

data:フィルタを行うキーワードを指定します。
icon:フィルタボタンに使用するアイコン画像を指定します。

これで、フィルタボタンを追加することができました。

まとめ

L.tagFilterButton を使うと簡単にフィルタボタンを追加することができました。

マーカーをカテゴリ分けして表示・非表示を行う場合に最適ではないでしょうか。

スポンサーリンク

シェアする

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

フォローする