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からトースト系の通知に切り替えていきたいところ。
関連記事
-
-
Leafletで「sidebar-v2」プラグインを導入してマップ上にサイドバーを設置する方法
Leafletでマップ上にサイドバー及びサイドメニューを実装したい。調べたところ ...
-
-
Leafletで表示したマップにジェスチャーハンドリングを追加する方法(Leaflet.GestureHandling)
GoogleMapをズームする際にPCだと「Ctrl+スクロール」、スマホだと「 ...
-
-
Leafletで「leaflet-search」プラグインを導入してマーカーの検索機能を追加する方法
LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...
-
-
leaflet.jsとOSMで現在地を取得しマップ上にマーカーを表示する方法
leaflet.jsとOpenStreetMapで現在位置の経度緯度を取得しマッ ...
-
-
架空の地図画像をLeafletを用いてWeb上でマップ表示する方法
ゲーム攻略サイト等でゲーム内の地図をWeb上で表示し、マーカーを立てたりマウスホ ...