Nextjs with react-leaflet - SSR, webpack | window not defined, icon not found

Question

Goal: I want to display a leaflet map in a nextjs App.

My dependencies are:

"leaflet": "1.9",
"next": "14",
"react": "18",
"react-leaflet": "4",

Problems:

• leaflet map doesn't load, I get a window is not defined error in the browser -> I found a solution for this, but don't understand in which context it works
• after fixing the above, I get a marker-icon.png 404 (Not Found) error in the browser -> What could be the cause of this and how could I fix it?

Questions:

• How to set up react-leaflet and nextjs properly?
• Why and how do the fixes work?

---

This is the standard example for react-leaflet and it throws a window is not defined error when run in nextjs:

const position = [51.505, -0.09]
        
render(
  <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <Marker position={position}>
      <Popup>
        A pretty CSS3 popup. <br /> Easily customizable.
      </Popup>
    </Marker>
  </MapContainer>
)

Status: Eventually I came up with a good setup. Please see my answer below for details and explanations.

Answer 1

2024: Nextjs 14 + react-leaflet 4

Find the detailed explanations with examples below or see the solution in action with a live example: codesandbox.

---

Explanation

After the explanations two examples will follow, one for a client and one for a server component.

window is not defined

This error occurs because nextjs renders every component by default on the server first. This is super useful for things like fetching data. But leaflet needs a browser window to display its content and there is no browser window on the server. So if we don't tell nextjs to not render the map component on the server, leaflet will throw an error, telling us that it couldn't find a browser window.

It is not enough to flag the leaflet component as a client component with use client. We still run into errors. The reason behind this is that leaflet will try to render before react finishes loading. We can postpone loading leaflet with next/dynamic.

marker-icon.png 404 (Not Found)

This error occurs with bundlers like webpack that modify URLs in CSS. This behavior clashes with leaflet's own dynamic creation of image urls. Fortunately this is easily fixable by installing leaflet-defaulticon-compatibility and doesn't require manual tweaks.

---

Using page.tsx as a client component

Setup nextjs and leaflet, install leaflet-defaulticon-compatibility:

npx create-next-app@latest
npm install leaflet react-leaflet leaflet-defaulticon-compatibility
npm install -D @types/leaflet

Important steps:

• import js for leaflet
• import css and js for leaflet-defaulticon-compatibility
• set width and height for the map container

components/Map.tsx

"use client";

// IMPORTANT: the order matters!
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css";
import "leaflet-defaulticon-compatibility";

import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";

export default function Map() {
  const position = [51.505, -0.09]

  return (
      <MapContainer
        center={position}
        zoom={11}
        scrollWheelZoom={true}
        {/* IMPORTANT: the map container needs a defined size, otherwise nothing will be visible */}
        style={{ height: "400px", width: "600px" }}
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>
            This Marker icon is displayed correctly with <i>leaflet-defaulticon-compatibility</i>.
          </Popup>
        </Marker>
      </MapContainer>
  );
}

Import the map component with next/dynamic. This has to be done in a different file from the one where the map component lives and it has to be done in the top level of the file, not inside another component. Otherwise it won't work:

app/page.tsx

"use client";

import dynamic from "next/dynamic";

const LazyMap = dynamic(() => import("@/components/Map"), {
  ssr: false,
  loading: () => <p>Loading...</p>,
});

export default function Home() {
  return (
    <main>
      <LazyMap />
    </main>
  );
}

---

Using page.tsx as a server component

If you want your page to be a server component, you can move the client component down the tree and pass data as props.

components/Map.tsx

"use client";
import { useState } from 'react';

/* ... more imports ... */

export default function Map({ initialData }) {
  const [data, setData] = useState(initialData);
  
  /* ... more code ... */
}

components/MapCaller.tsx

'use client';

import dynamic from 'next/dynamic';

const LazyMap = dynamic(() => import("@/components/Map"), {
  ssr: false,
  loading: () => <p>Loading...</p>,
});

function MapCaller(props) {
  return <LazyMap {...props} />;
}

export default MapCaller;

app/page.tsx

import MapCaller from '@/components/MapCaller';
/* your fetch function that fetches data server side */
import { fetchData } from '@/lib/data';

export default async function Page() {
  const data = await fetchData();

  return <MapCaller initialData={data} />;
}

Answer 2

We can use simple custom SVG icon which can be compatible with next.js.

Custom icons can add more control to your maps to represent with different colors subject to your requirements such as status.

Here is an example use case to use custom markers.

import { useEffect, useRef } from "react";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { Box } from "@mui/material";

interface MarkerProps {
  lat: number;
  lng: number;
  status?: string;
  popupData?: { [key: string]: any };
}

interface MapProps {
  markers: MarkerProps[];
  width?: string | number;
  height?: string | number;
  coordinates?: [number, number];
}

const LeafletMap: React.FC<MapProps> = ({
  markers,
  width = "100%",
  height = 400,
  coordinates = [42.505, -1.12],
}) => {
  const mapRef = useRef<L.Map | null>(null);
  const mapContainerRef = useRef<HTMLDivElement | null>(null);
  const markersRef = useRef<L.Marker[]>([]);

  const getIcon = (status: string) => {
    const baseSvg = `
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M12 2.16125C7.8 2.16125 4 5.38125 4 10.3612C4 13.5413 6.45 17.2813 11.34 21.5913C11.72 21.9213 12.29 21.9213 12.67 21.5913C17.55 17.2813 20 13.5413 20 10.3612C20 5.38125 16.2 2.16125 12 2.16125ZM12 12.1613C10.9 12.1613 10 11.2613 10 10.1613C10 9.06125 10.9 8.16125 12 8.16125C13.1 8.16125 14 9.06125 14 10.1613C14 11.2613 13.1 12.1613 12 12.1613Z" />
      </svg>
    `;

    const getColor = () => {
      switch (status) {
        case "Active":
          return "blue";
        case "Inactive":
          return "red";
        default:
          return "grey";
      }
    };

    const finalSvg = baseSvg.replace('fill="none"', `fill="${getColor()}"`);

    return L.icon({
      iconUrl: `data:image/svg+xml,${encodeURIComponent(finalSvg)}`,
      iconSize: [20, 32], // size of the icon
    });
  };

  useEffect(() => {
    if (mapContainerRef.current && !mapRef.current) {
      mapRef.current = L.map(mapContainerRef.current, {
        attributionControl: false,
      }).setView(coordinates, 13);

      L.tileLayer(
        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        {}
      ).addTo(mapRef.current);
    }
  }, []);

  useEffect(() => {
    if (mapRef.current) {
      // To Clear existing markers
      markersRef.current.forEach((marker) => {
        mapRef.current!.removeLayer(marker);
      });
      markersRef.current = [];

      markers.forEach((markerProps) => {
        const marker = L.marker([markerProps.lat, markerProps.lng], {
          icon: getIcon(markerProps.status || "default"),
        });

        if (markerProps.popupData) {
          const popupContent = Object.entries(markerProps.popupData)
            .map(([key, value]) => `<b>${key}:</b> ${value}`)
            .join("<br/>");
          marker.bindPopup(popupContent);
        }

        marker.addTo(mapRef.current!);
        markersRef.current.push(marker);
      });
    }
  }, [markers]);

  return <Box ref={mapContainerRef} style={{ height, width }} />;
};

export default LeafletMap;

and you can call this component and add props as follows:

<LeafletMap
        markers={markers}
        width="100%"
        height="300px"
        coordinates={[51.505, -0.09]}
      />

This input markers props and other props can be adjusted to your requirement.