Search code examples
next.jsleafletreact-leaflet

Leaflet set-up using Nextjs is not working

I'm currently trying to add a customizable map on my website. But when I try to add React Leaflet, the map is visible, but cut in different "leaflet-tiles". I don't know what is causing this to appear in this particular way.

I'm using Nextjs 13.4.19, react-leaflet 4.2.1 and leaflet 1.9.4. enter image description here

I want the map to be in orange block.

This is my code :

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

export default function Homepage() {
<>
    <link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin=""
    />
</>;
  return (
    <div className="bg-orange-aggro">
              <MapContainer
                center={[51.505, -0.09]}
                zoom={13}
                scrollWheelZoom={false}
                height="400px"
              >
                <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={[51.505, -0.09]}>
                  <Popup>
                    A pretty CSS3 popup. <br /> Easily customizable.
                  </Popup>
                </Marker>
              </MapContainer>
    </div>
  );
}

In the documentation :

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

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

I don't know what I'm doing wrong, any help would be appreciated. Thanks!

Solution

  • @Clement, first of all you have to add this line like Ensar said

    Furthermore you need to add your style as object

    import "leaflet/dist/leaflet.css";
.
.
.
    <MapContainer
      center={[51.505, -0.09]}
      zoom={13}
      scrollWheelZoom={false}
      style={{height: '400px'}}
    >