Leafletにアイコン(ボタン)を設置できる「Leaflet.EasyButton」プラグインの利用方法

先日「leaflet-tag-filter-button」プラグインのCDN呼び出しの際、「Leaflet.EasyButton」も一緒に読み込んでいたが、「Leaflet.EasyButton」単体で利用したことがないため以下にサンプルと利用方法についてメモ。

サンプル

https://taitan916.info/sample/leaflet.js/plugin/Leaflet.EasyButton/

鉛筆と本のアイコンが左上に表示され、クリックするとそれぞれ異なる内容のアラートが表示される筈。

Leaflet.EasyButton

公式サイト

http://danielmontague.com/projects/easyButton.js/

GitHub

https://github.com/CliffCloud/Leaflet.EasyButton

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

「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://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.easyButton('<i data-feather="edit-2"></i>', function(btn, map){
    alert('鉛筆アイコンをクリックしました。');
}).addTo( map );

L.easyButton('<i data-feather="book"></i>', function(btn, map){
    alert('本アイコンをクリックしました。');
}).addTo( map );

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