Install the necessary packages:
npm install react@rc react-dom@rc leaflet
npm install react-leaflet@next
And add Typescript definitions:
npm install -D @types/leaflet
The map will be placed in a client-side component.
app/map/Map.tsx:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| "use client";
import "leaflet/dist/leaflet.css";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
const Map = () => {
return (
<MapContainer
center={[46.861505, 2.496587]}
zoom={6}
>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[43.56295237, 1.46810716]}>
<Popup>
Hello world!
</Popup>
</Marker>
</MapContainer>
);
};
export default Map;
|
Now, import the component to your page dynamically with server-side rendering turned off (ssr: !!false):
app/map/page.tsx:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| import styles from "./page.module.css";
import dynamic from "next/dynamic";
const DynamicMap = dynamic(() => import("./Map"), {
loading: () => (
<p>Loading map...</p>
),
ssr: !!false,
});
export default function Page() {
return (
<article className={styles.article}>
<div className={styles.container}>
<DynamicMap />
</div>
</article>
);
}
|
And finally, give the map a width and height other than 0 for it to appear:
app/map/page.module.css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .article {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 1345px;
margin: 2rem auto;
}
.container {
width: 50vw;
height: 60vh;
display: flex;
}
.container > div {
flex: 1;
}
|
It works, but the marker icons don’t (idk why).
There are 2 solutions:
Add marker-icon.png in your public folder under the same path as the URL path, so for instance it would be public/map/marker-icon.png in my example.
The adding-a-custom-icon fix
Or a better way to fix it is by adding a custom marker icon to your markers:
app/map/Map.tsx:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| import L from "leaflet";
/* ... */
const Map = () => {
const markerIcon = new L.Icon({
iconUrl: "/marker-icon.png",
shadowUrl: "/marker-shadow.png",
iconSize: [22, 32],
shadowSize: [41, 41], // size of the shadow
iconAnchor: [22, 64], // point of the icon which will correspond to marker's location
shadowAnchor: [24, 72], // the same for the shadow
popupAnchor: [-11, -62] // point from which the popup should open relative to the iconAnchor
});
return (
{/* ... */}
<Marker position={[43.56295237, 1.46810716]} icon={ markerIcon }>
<Popup>
Hello world!
</Popup>
</Marker>
{/* ... */}
);
};
/* ... */
|
Then add
and
to the public folder.
Or you can use the default marker icon and shadow from leaflet.
