React Leaflet マップイベント useMapEvent の使い方

npx create-react-app

npm install leaflet react-leaflet

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

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

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"
      />
      <MapEvent />
    </MapContainer>
  );
}

export default App;

import { useMapEvent } from "react-leaflet";

function MapEvent() {
  const map = useMapEvent("click", (location) => {
     map.setView(location.latlng, map.getZoom(), {
       animate: true,
     });    
    
    //ポップアップ
    // map.openPopup('<div>popup</div>', location.latlng)

    // ツールチップ
    // map.openTooltip('<p>toolTip</p>', location.latlng)

    //ズームイン・ズームアウト
    // map.zoomIn(1)
    // map.zoomOut(1)

    //現在の位置情報
    // map.locate({
    //     setView: true
    // })

    //中心
    // console.log(map.getCenter())

    //境界座標
    // console.log(map.getBounds())

    //マップサイズ
    // console.log(map.getSize()) 
  });
  
}

export default MapEvent;