React-leaflet map shows scattered blocks of maps

Question

I was trying to show a sample map on my react website. I have installed the leaflet package and also the react-leaflet package then set everything up as the react-leaflet document said to do. You can see my code below for a reference on how I set it up.

 <div>
  <h3 className='text-4xl my-4 text-center text-slate-800 font-bold'>Maps and Direction</h3>
  <div className='mx-auto py-2' style={{ width: "80%", height: "100%" }}>
    <MapContainer center={position} zoom={13} scrollWheelZoom={true}>
      <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>
          Website Name
        </Popup>
      </Marker>
    </MapContainer>
  </div>
</div>

I have also imported the leaflet css CDN in my index.html like this,

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />

I have also set a defined height and width of the map container as you can see in my code. But it shows some scattered parts of the map like this picture.

.

Please can anyone help me with what could be the problem or if I'm missing any instruction.

Leflore

Welcome to SO! This is indeed usually an issue of missing Leaflet CSS file. But since you seem to be loading it, there may be many other reasons. Please consider sharing a live reproduction example, e.g. using CodeSandbox or StackBlitz. – Tauromachy

Thank you for trying to help. I found a solution, you can see that in the answer but don't really know why I had to do it. I would very much appreciate it if you can help me with the reasoning. – Leflore

Answer 1

try importing this line in your import section

import "leaflet/dist/leaflet.css"

Amino

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Avigation

Answer 2

I managed to make it work somehow. I just added the below CSS code in app.css file.

.leaflet-container {
width: 100%;
height: 60vh;
}

But I don't understand why I needed to add that. Is .leaflet-container like a built-in container for leaflet map?

Leflore

Use this to refresh your map, map.invalidateSize(); Set the map to whatever you have defined as your map. – Wenn

Answer 3

$ npm i leaflet leaflet-defaulticon-compatibility leaflet-geosearch react-leaflet

Then add

import { MapContainer, TileLayer,Marker,Popup } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
import "leaflet-defaulticon-compatibility";

Duumvir

Answer 4

Add leaflet.css and it will fix (node_modules/leaflet/dist/leaflet.css)

Croupier