react + typescript + leaflet

• create project

$ npx create-react-app@latest project-name –template typescript
$ cd project-name
$ yarn add react react-dom leaflet
$ yarn add react-leaflet
$ yarn add -D @types/leaflet

• add App.css

.leaflet-container {
	width: 100%;
	height: 100vh;
}

• change App.tsx

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

function App() {
  return (
    <div className="App">
      <MapContainer center={[36, 128]} zoom={4} scrollWheelZoom={true}>
        <TileLayer
          attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
    </div>
  );
}

export default App;