概要

LeafletでMap上に表示する複数のポップアップを全て表示したり、任意のタイミングで全て閉じる方法で詰まったのでメモ。

全て開く

方法は簡単でbindPopupする時に、openPopup()と付け加えるだけ。
注意点としてはポップアップはデフォルトでは一つずつしかマップで開けないようになっているため
autoCloseというオプションをfalseに設定しておく必要がある。

// マーカーの見た目を定義
var divIcon = L.divIcon({
  html: '<div>マーカー</div>',
  className: 'marker', 
  iconSize: [100, 20]
});
// マップに追加する
marker = L.marker([35.6896, 139.6918], {icon:divIcon }).addTo(map);
// バインド時にautoCloseをfalseに設定
marker.bindPopup(popuphtml,{autoClose:false}).openPopup();

上記をMapに追加する時に設定してやれば、例えばページを開いた時に全てのポップアップを表示するという動作も可能。

全て閉じる

開いたpopupを閉じる手段の一つとしてはclosePopup()がある。

// マーカーを閉じる
marker.closePopup();

ただ、この方法ではautoClose:falseに設定した複数のpopupを一斉に閉じる事ができず、「最後に開いたpopupを一つだけ閉じる」という動作が行われる。

この問題を解決するなら、Layerに閉じたいマーカーを入れて、eachLayerを使って回すという方法が手っ取り早い。

// マップに追加するマーカーをまとめるレイヤーを作成
markertGroup = new L.layerGroup();

// マーカーの定義を省略(=marker)
// マップ追加時にレイヤーに登録する
markertGroup.addLayer(marker).addTo(map);
// 表示済みのレイヤーを削除する
markertGroup.eachLayer(function (layer) {
    markertGroup.removeLayer(layer);
});

上記のようにeachLayerでremoveLayerを回してやれば、簡単にmap上の複数の要素を削除する事ができる。
内部にif文を加えて捕捉の条件を付け加えれば「特定の値を持つ要素のみの削除」なども可能


marker.id= 1;
const number = 1;
markertGroup.eachLayer(function (layer) {
    // marker.idの値が1のものを削除する
    if (layer.id == number) {
       markertGroup.removeLayer(layer);
    }
});

参考

[レイヤーがポリゴンであるLeaflet LayerGroupで特定のレイヤーを見つける]
(https://www.it-swarm.jp.net/ja/javascript/%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%E3%81%8C%E3%83%9D%E3%83%AA%E3%82%B4%E3%83%B3%E3%81%A7%E3%81%82%E3%82%8Bleaflet-layergroup%E3%81%A7%E7%89%B9%E5%AE%9A%E3%81%AE%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%E3%82%92%E8%A6%8B%E3%81%A4%E3%81%91%E3%82%8B/823093436/)

Documentation - Leaflet