<h3>A crash course on using Leaflet Maps in\xa0NextJS</h3>\n<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vVM13L6I1UGekROEMx8gpw.jpeg"></figure>Originally published on my\xa0<a href="https://tomisin.dev/blog">blog</a>.\n<h1>Installation</h1>\n<ol>\n<li>First, install the leaflet library and its React wrapper with the following command: npm install leaflet react-leaflet</li>\n<li>(For TypeScript projects) Install the types for the leaflet library npm install -D @types/leaflet</li>\n<li>Install a library containing the default icons (icons might not display properly if this step is omitted) npm install leaflet-defaulticon-compatibility</li>\n</ol>\n<h1>Usage</h1>\n<h3>1. Define your Component</h3>\nIn a component outside the page where you wish to display the map, create and export a map component similar to\xa0this:\n<pre>// src/components/Map.tsx import { MapContainer, Marker, TileLayer, Tooltip } from "react-leaflet" import "leaflet/dist/leaflet.css" import "leaflet-defaulticon-compatibility" import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css" export default function MyMap(props: any) { const { position, zoom } = props return &lt;MapContainer center={position} zoom={zoom} scrollWheelZoom={false}&gt; &lt;TileLayer attribution=\'&amp;copy; &lt;a href="https://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors\' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /&gt; &lt;Marker position={position}&gt; &lt;Popup&gt; A pretty CSS3 popup. &lt;br /&gt; Easily customizable. &lt;/Popup&gt; &lt;/Marker&gt; &lt;/MapContainer&gt; }</pre>\n<h3>2. Dynamically import your Component</h3>\nNext, you’ll need to import your component into your page dynamically. This would eliminate the need to perform Server-Side Rendering (SSR), thereby walking around the compatibility issues that LeafletJS has with\xa0SSR.\n<pre>export default function MyPage() { const Map = useMemo(() =&gt; dynamic( () =&gt; import(\'@/components/Map\'), { loading: () =&gt; &lt;p&gt;A map is loading&lt;/p&gt;, ssr: false } ), []) return &lt;div&gt; &lt;Map /&gt; &lt;/div&gt; }</pre>\nThere we have\xa0it!\nIf you found this article helpful, do clap, share and subscribe!

A crash course on using Leaflet Maps in NextJS

Contents

nextjs

web-development

Displaying a Leaflet Map in NextJS

People also read