プログラミングLeafletのプラグイン「L.tagFilterButton」使用して、マーカーのフィルタリングを行うボタンを追加します。実装すると以下のようになります。拡大・縮小ボタンの下にフィルタボタンが追加されます。フィルタボタンをクリックすると、選択候補が表示されます。Demoはこちらです。地図を描画するまでの解説は、leaflet入門1に記載しています。本体と「Leaflet.EasyButton」プラグインの読み込みが必要になります。それぞれ、GitHubからダウンロードできます。単体での使い方は、こちらになります。tagsで設定したキーワードでフィルタリングすることができます。tagsは配列で定義するので、1つのマーカーに複数のキーワードを設定することができます。);}data:フィルタを行うキーワードを指定します。icon:フィルタボタンに使用するアイコン画像を指定します。これで、フィルタボタンを追加することができました。使うと簡単にフィルタボタンを追加することができました。マーカーをカテゴリ分けして表示・非表示を行う場合に最適ではないでしょうか。スポンサーリンクシェアするツイートフォローする関連記事Leaflet入門|プラグインでポップアップをレスポンシブ化する(leaflet-responsive-popup)leafletのプラグイン(leaflet-responsive-popup)を使用して、レスポンシブなポップアップメッセージを作成します。記事を読むLeaflet入門|プラグインでフルスクリーン表示の切り替え(leaflet.fullscreen)leafletのプラグイン(leaflet.fullscreen)を使用して、フルスクリーン表示の切り替えを行います。記事を読むpydicom|DICOM画像を表示するpydicomを使って、DICOM画像を表示します。5行(改行含まず)で、画像が表示できます。参考に、D3.jsで棒グラフを作成します。実際のコードやデモを記載しています。記事を読むLeaflet入門|おすすめプラグイン(ズーム系)Leafletのズーム系プラグインをまとめてみました。各プラグインの実装方法も記載しています。記事を読むLeaflet入門|マップに緯度経度を表示する(MousePosition)Leafletのプラグイン「Leaflet.MousePosition」を使って、マップにマウスポインター地点の緯度経度を表示します。記事を読むLeaflet入門|プラグインで矩形選択した箇所を拡大する(BoxZoom)leafletのプラグイン(BoxZoom)を使用して、地図上の矩形選択した箇所を拡大するコントローラーを追加します。記事を読むLeaflet入門|シングルクリックイベントを実装する(singleclick)Leafletのプラグイン「Leaflet.singleclick」を使って、シングルクリック時に任意の処理を行います。今回は、マップ全体とマーカーにシングルクリックイベントを実装する手順を記載しています。記事を読むLeaflet入門|プラグインでホームボタンを追加する(defaultextent)leafletのプラグイン(defaultextent)を使用して、地図を初期表示に戻すホームボタンを追加します。カスタムすることで自由にホームボタンクリック時の、中心座標・ズームレベルなどを変更することができます。記事を読むLeaflet入門|プラグインでズームレベルを表示する(ZoomLabel)leafletのプラグイン(ZoomLabel)を使用して、地図に現在のズームレベルを表示します。コメントをキャンセルメールアドレスが公開されることはありません。