Leafletにタグフィルター機能を実装できる「leaflet-tag-filter-button」プラグインの利用方法

以前にLeafletでマーカーをグループ化し、チェックボックスの状態により表示非表示を切り替える方法をメモしたがデザイン的に非常にシンプルというか微妙な見た目だった。この辺りを何とかならないか調べたところ「leaflet-tag-filter-button」プラグインが良さそう。以下にサンプルと利用方法をメモ。

サンプル

https://taitan916.info/sample/leaflet.js/plugin/leaflet-tag-filter-button/

左上の鉛筆アイコンをクリックするとタグ一覧が表示され、クリックするとフィルター機能が実行される筈。

leaflet-tag-filter-button

公式サイト

https://maydemirx.github.io/leaflet-tag-filter-button/

GitHub

https://github.com/maydemirx/leaflet-tag-filter-button

CDN

CDNで使う場合は以下を記述する。

<script src=" https://cdn.jsdelivr.net/npm/leaflet-easybutton@2.4.0/src/easy-button.min.js "></script>
<link href=" https://cdn.jsdelivr.net/npm/leaflet-easybutton@2.4.0/src/easy-button.min.css " rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/leaflet-tag-filter-button@0.0.5/src/leaflet-tag-filter-button.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/leaflet-tag-filter-button@0.0.5/src/leaflet-tag-filter-button.min.css" rel="stylesheet">

<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

「leaflet-tag-filter-button」プラグインだけでは動作せず、「Leaflet.EasyButton」も必要になる。

「Feather」についてはアイコン用に読み込んでいるが、別途アイコン用の画像を用意する場合は不要。

利用方法

ソースコード

<style>
html, body, #map {
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>
<div id="map"></div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-sprite@1.0.0/dist/leaflet.sprite.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2.4.0/src/easy-button.min.js "></script>
<link href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2.4.0/src/easy-button.min.css " rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/leaflet-tag-filter-button@0.0.5/src/leaflet-tag-filter-button.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/leaflet-tag-filter-button@0.0.5/src/leaflet-tag-filter-button.min.css" rel="stylesheet">

<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>

let map;
map = L.map('map');

//中心の経度緯度
const center = ['35.681236', '139.767125'];

//ズームレベル
const zoom = 12;

//マップの中心地とズームレベルを指定
map.setView(center, zoom);

const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a>',
    maxZoom: 19
});
tileLayer.addTo(map);

//マーカー生成
const mapData = [
    { 'lat' : '35.689607', 'lng' : '139.700571', 'body' : '新宿駅', 'tags' : ['駅']}, 
    { 'lat' : '35.681236', 'lng' : '139.767125', 'body' : '東京駅', 'icon' : 'green', 'tags' : ['駅']}, 
    { 'lat' : '35.628471', 'lng' : '139.73876', 'body' : '品川駅', 'icon' : 'orange', 'tags' : ['駅']}, 
    { 'lat' : '35.658581', 'lng' : '139.745433', 'body' : '東京タワー', 'icon' : 'yellow', 'tags' : ['観光地']}, 
    { 'lat' : '35.660238', 'lng' : '139.730077', 'body' : '六本木ヒルズ', 'icon' : 'red', 'tags' : ['観光地']}, 
    { 'lat' : '35.714765', 'lng' : '139.796655', 'body' : '浅草寺', 'icon' : 'purple', 'tags' : ['観光地', '寺']}, 
    { 'lat' : '35.636564', 'lng' : '139.763144', 'body' : 'レインボーブリッジ', 'icon' : 'violet', 'tags' : ['観光地']}, 
];
for( key in mapData ){
    makeMarker(mapData[key]);
}

function makeMarker( mapData ){
    L.Icon.Default.imagePath = 'https://unpkg.com/leaflet@1.3.1/dist/images/';
    const icon = L.spriteIcon(mapData.icon);

    //ポップアップの表示位置調整
    icon.options.popupAnchor = [2, -35];
    L.marker([mapData.lat, mapData.lng], {icon: icon, tags: mapData.tags})
    .bindPopup(mapData.body)
    .addTo(map);
}

//フィルター用ボタンの設置
L.control.tagFilterButton({
    data: ['駅', '観光地', '寺'],
    icon: '<i data-feather="edit-2"></i>',
    filterOnEveryClick: true
}).addTo( map );

//アイコン表示
const feather_option = {
    width: '15px',
}
feather.replace(feather_option);

</script>

所感

以前のものよりデザイン的に良いのと、負荷的に改善できてそうなのでこちらを使っていきたいところ。