Next.js React Leaflet Map not Showing Properly

Question

I have the next leaflet map:

But is not showing anything properly, only when I drag the map and only loads the parts that you can see in the upper left corner, as the second image.

I have discovered that the error only happens at the first render, If I navigate to other page without refresh (next Link component) then it appears correctly.

My code:

import React, { useState } from "react";
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";

function Map({ coordinates }) {
   const [position, setPosition] = useState(coordinates);
   return (
      <MapContainer center={position} zoom={100} scrollWheelZoom={false} style={{ height: "500px", width: "100%" }}>
         <TileLayer attribution='&copy; <a href="http://osm.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>
   );
}

export default Map;

I have installed react-reaflet and leaflet, I also imported the CSS and specified the width and the height of the container, as others solutions in Stack Overflow indicates, but nothing works.

How I import the component in Next (because leaflet does not support Server Side Rendering):

/**
 * Leaflet makes direct calls to the DOM when it is loaded, therefore React Leaflet is not compatible with server-side rendering.
 * @see https://stackoverflow.com/a/64634759/9244579
 */
const Map = dynamic(() => import("../../components/Map"), {
   loading: () => <p>Map is loading</p>,
   ssr: false, // This line is important. It's what prevents server-side render
});

might find some clues at [leaflet loads incomplete map](https://stackoverflow.com/questions/36037178/leaflet-loads-incomplete-map) — Seth Lutske, Jul 06 '21 at 16:54
here I have the simplest version [https://stackoverflow.com/a/73884898/10128320](https://stackoverflow.com/a/73884898/10128320) — Akbar isneverdead, Sep 28 '22 at 16:35

score 2 · Answer 1 · answered Jul 22 '22 at 07:16

Side note in 2022 about this topic: it sounds like that if your map is not rendering as intended (missing tiles and so on) you forgot to comply with every point the documentation mentioned:

If the map is not displayed properly, it is most likely because you haven't followed all the prerequisites.

Make sure all dependencies are installed and using supported versions Make sure Leaflet's CSS is loaded Make sure your map container has a defined height

Taken from: https://react-leaflet.js.org/docs/start-setup/

In my case, missing the height of the map was rendering just some tiles.

Peter Palmer · Accepted Answer · 2021-11-27T15:31:50.040

I just solved the problem.

I discovered that if I resize the window the map shows properly, so what I had to do is to call invalidateSize() function every 100 miliseconds for having the size of the screen updated all the time, this will work at the first render too.

import React, { useState, useEffect } from "react";
import { MapContainer, Circle, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";

function Map({ coordinates }) {
   const position = coordinates;
   const fillBlueOptions = { fillColor: "#0484D6" };
   const [map, setMap] = useState(null);

   useEffect(() => {
      if (map) {
         setInterval(function () {
            map.invalidateSize();
         }, 100);
      }
   }, [map]);

   return (
      <MapContainer center={position} zoom={20} scrollWheelZoom={false} style={{ height: "400px", width: "100%" }} whenCreated={setMap}>
         <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
         <Circle center={position} pathOptions={fillBlueOptions} radius={50} />
      </MapContainer>
   );
}

export default Map;

Take into consider that you have to add the propert whenCreated={setMap} to the MapContainer component.

Next.js React Leaflet Map not Showing Properly

2 Answers2