Leaflet.jsでsafariだけポップアップが出なかった（出づらくなっていた）問題を解決

ざっくり経緯

• 引き継いだ案件で、複数店舗の地図表示に Leaflet.js を使用

• 各マーカーをクリックするとポップアップが表示
  （各店舗の簡易情報＋各店舗詳細ページへのリンクが記載）

• 各マーカーがすべて表示されるように fitBounds を使用

• 何故か Mac Safari の環境だけ動作しないので依頼を受けた

状況確認

for文で各マーカーを作成し、各マーカーごとに以下ポップアップの処理を付けていた

• L.marker でマーカーを作成

• addTo で地図にマーカー追加

• bindPopup でマーカークリック時にポップアップ表示させる処理追加

• addLayer でマーカーレイヤーに追加

ざっくりコードのイメージは以下のとおり

// map に地図の設定済

const markers = L.featureGroup();

// for文で各複数店舗以下の処理を回す

markers.addLayer(
  L.marker(
    [lat, lng],
    {
      icon: setIcon,
      zIndexOffset: zIndex
    },
  )
    .addTo(map)
    .bindPopup(
      `<div>店舗簡易情報＆リンク</div>`
    )
);

        :

map.fitBounds(markers.getBounds()).setZoom(9);

addLayer使っている以外は一見マニュアルどおりで問題なさそうだが、Safariだけ動いてくれない

ということで、bindPopup をやめて、popup で同じことを実現してみる

対応方法

• クリックイベントを作成

  • マーカー用の変数用意

• マーカーをクリックしたら L.popup を使ってポップアップ表示

  • setLatLng で緯度経度をセット

  • setContent で内容セット

  • openOn で地図にポップアップ表示

ざっくりコードのイメージは以下のとおり

// map に地図の設定済

const markers = L.featureGroup();

// for文で各複数店舗以下の処理を回す

const marker = L.marker(
  [lat, lng],
  {
    icon: setIcon,
    zIndexOffset: zIndex
  }
);

const onMarkerClick = (e) => {
  const target = e.target;
  const popupContent = `<div>店舗簡易情報＆リンク</div>`
  APP.map.setView(target.getLatLng(), 14);
  L.popup()
    .setLatLng(target.getLatLng())
    .setContent(popupContent)
    .openOn(map);
};

markers.addLayer(
  marker.addTo(map)
);

marker.on('click', onMarkerClick);

        :

map.fitBounds(markers.getBounds()).setZoom(9);

こんな感じで Safari でも問題なくポップアップがスムーズに表示されるようになった
（ついでにクリックした店舗も拡大するようにしてみた）