leaflet 2023/06/09

React Leaflet マーカーをクリックやドラッグなどのイベントを使う方法

React Leaflet は、React.js フレームワークと Leaflet ライブラリを組み合わせた地図コンポーネントの作成を容易にするためのライブラリです。この記事では、地図上にクリックでポップアップを表示、ドラッグ後に位置を取得、するマーカーを追加する方法とそれを削除する方法を確認します。

パッケージのインストールとフォルダ構成

アプリを作成します。

npx create-react-app

パッケージをインストールします、leaflet と react-leaflet を使用します。

npm install leaflet react-leaflet

ファイル構成

src //
  |-- index.js
  |-- index.css
  |-- App.css
  |-- App.js
  `-- conponents //
      `-- markerEvent.js

マーカーをクリックやドラッグなどのイベントを使う

React Leaflet マップ表示とレイヤーコントロール

2023年06月06日

leaflet

import {
  MapContainer,
  TileLayer,
} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "./App.css";
import MarkerEvent from './components/markerEvent'

const center = [35.3628, 138.7307];

function App() {
  return (
    <MapContainer center={center} zoom={10} zoomControl={false} id="map">
      <TileLayer
        attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <MarkerEvent />
    </MapContainer>
  );
}

export default App;

7, 18: <MarkerEvent /> コンポーネントをインポートして、表示させます。

MarkerEvent コンポーネントを作成する

import { Marker, useMapEvent } from "react-leaflet";
import L from "leaflet";

function MarkerEvent() {
  const map = useMapEvent("click", (location) => {
    const marker = L.marker([location.latlng.lat, location.latlng.lng], {
      draggable: true,
    })
      .addTo(map)
      .on("click", function (e) {
        marker.bindPopup('<div>popup</div>', {
            maxWidth: 200,
        })
      });
      
      marker.on('moveend', (e) => {
        console.log(e.target._latlng)
      });

      marker.on('contextmenu', (e) => {
        console.log(e)
        marker.remove()
      })
  });
  const center = [35.3628, 138.7307];

  return <div>markerEvent</div>;
}
export default MarkerEvent;