勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

  JavaScript

以前に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>

 

所感

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

 - JavaScript

  関連記事

Leafletでマーカーを動的に変更し、変更状況をCookieに保存する方法

Leafletでポップアップ(フキダシ)内のボタンをクリックするとマーカーを動的 ...

Leafletで「Leaflet-MiniMap」プラグインを導入し通常のマップと連動するミニマップを表示する方法

Leafletでマップを表示した上で、そのマップと連動したミニマップを表示させた ...

Leafletにてマップ移動時にURLに座標を自動付与する「leaflet-view-meta」プラグインの利用方法

Googleマップだとマップを移動した際、URLに座標(経度緯度)が付与されるた ...

Leafletで表示したマップにジェスチャーハンドリングを追加する方法(Leaflet.GestureHandling)

GoogleMapをズームする際にPCだと「Ctrl+スクロール」、スマホだと「 ...

Leafletにて地図を全画面(フルスクリーン)表示機能を追加する方法

Leafletにて表示されている地図に全画面表示ボタンが設置されているサイトがあ ...