Leafletでマップ上に通知(トースト)機能を追加する方法(Leaflet.Notifications)

Leafletでマーカー内のボタンクリック時等、ユーザーが何らかのアクションを行った際にマップ上に通知(トースト)したい。JavaScriptのalertだとユーザー側で閉じる必要があるため微妙。「Leaflet.Notifications」というプラグインを追加することで良い感じになったので実装方法をメモ。

Leaflet.Notifications

GitLab

https://gitlab.com/manuel.richter95/leaflet.notifications

デモページ

http://leaflet-notifications.manuel-ri.de/

CDN

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

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

異なるバージョンを利用したい場合は以下から探す。

https://www.jsdelivr.com/package/npm/leaflet-notifications

サンプル

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

マーカー内のボタンをクリックするとマップ右上に通知が表示される筈。

利用方法

ソースコード

<div id="map"></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<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-notifications@1.0.7/js/leaflet-notifications.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/leaflet-notifications@1.0.7/css/leaflet-notifications.min.css" rel="stylesheet">

<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' : '<div class="btn" data-place="新宿駅">button</div>'}, 
    { 'lat' : '35.681236', 'lng' : '139.767125', 'body' : '<div class="btn" data-place="東京駅">button</div>'}, 
    { 'lat' : '35.628471', 'lng' : '139.73876', 'body' : '<div class="btn" data-place="品川駅">button</div>'}, 
];
var marker = [];
for( key in mapData ){
    marker[key] = 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];
    const marker = L.marker([mapData.lat, mapData.lng], {icon: icon})
    .bindPopup(mapData.body)
    .addTo(map);

    return marker;
}

const notification = L.control
.notifications({
    timeout: 3000,
    position: 'topright',
    closable: true,
    dismissable: true,
    className: 'modern'
})
.addTo(map);

$(function(){
    //ボタンクリック時
    $('body').on('click', '.btn' , function() {
        notification.info(`通知`, `${$(this).data('place')}のボタンをクリックしました。`);
    });
});

</script>

解説等

基本的な使い方としては以下のような構文になる。

notification.【通知レベル(info等)】(`【タイトル】`, `【本文】`);

尚、表示時間やデザイン等のオプションはこちらのページを参照すること。

所感

バニラJSのalertは以下の点が微妙だなぁと思うことがある。

• ブラウザによってデザインが異なる
• ユーザー側で閉じるアクションが必要
• ブラウザ側で「このページでこれ以上ダイアログボックスを生成しない」と表示され、そのように設定されるとアラートが表示されない

そのため今回のLeafletに限らずバニラJSからトースト系の通知に切り替えていきたいところ。