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

npx create-react-app

npm install leaflet react-leaflet

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

import {
  MapContainer,
  TileLayer,
  LayersControl,
} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "./App.css";


function App() {
  const center = [35.3628, 138.7307];
  return (
    <MapContainer
      center={center}
      zoom={10}
      zoomControl={true}
      scrollWheelZoom={true}
      id="map"
    >
      <LayersControl position="topright">
        <LayersControl.BaseLayer checked name="シンプル">
          <TileLayer
            attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
        </LayersControl.BaseLayer>
        <LayersControl.BaseLayer name="詳細">
          <TileLayer
            attribution="<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>"
            url="https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png"
          />
        </LayersControl.BaseLayer>
        <LayersControl.BaseLayer name="航空写真">
          <TileLayer
            attribution="Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
            url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
          />
        </LayersControl.BaseLayer>
      </LayersControl>
    </MapContainer>
  );
}

export default App;

#map {
    width: 100vw;
    height: 100vh;
}