React-Leafletでクリックされた位置に複数マーカーを配置する

はじめに

React-Leafletを使用し、クリックされた位置に複数マーカーを配置するサンプルコードを紹介します。
また、マーカーのポップアップで削除用のリンクを表示し、置いたマーカーを削除できるようにもします。

実行

React-Leafletでは、マウス操作など地図上で発生するイベントは useMapEvents フックを使って取得します。

最初に、useMapEvents は MapContainer のコンテキスト内でのみ使用可能であるため、ClickMaker という子コンポーネントを作り、地図上でマウスクリックが発生するたびにマーカーを配置する処理を書きます。

function ClickMaker() {
  const [positions, setPositions] = useState<Array<LatLng>>([])

  //地図のクリックイベント
  const map = useMapEvents({
    click(e) {
      //クリックされた箇所にマーカーを追加
      setPositions([...positions, e.latlng])
    }
  })

  //マーカーの削除
  const handleDelete = useCallback(
    (latlng: LatLng, e: MouseEvent) => {
      e.preventDefault()
      e.stopPropagation()
      setPositions(positions.filter(x => !x.equals(latlng)))
    },
    [positions],
  )

  return (
    <>
      {positions.map(x => (
        <Marker position={x} >
          <Popup><a href='#' onClick={(e) => handleDelete(x, e)}>削除</a></Popup>
        </Marker>
      ))}
    </>
  )
}

export default ClickMaker

上で作成した ClickMaker を親の App コンポーネントに配置します。

function App() {
  const position: LatLngTuple = [35.710179001728534, 139.8107304222906]

  return (
    <MapContainer center={position} zoom={17} scrollWheelZoom={false} style={{ height: "100vh" }}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {/* マーカーの表示 */}
      <ClickMaker/>
    </MapContainer>
  )
}

■実行結果

完