'React-leaflet map shows scattered blocks of maps

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.

shows scattered map blocks.

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

reactjsleafletreact-leaflet


Solution 1:[1]

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?

Solution 2:[2]

$ 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";

Solution 3:[3]

try importing this line in your import section

import "leaflet/dist/leaflet.css"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nafi
Solution 2 Ti?n Tr?n
Solution 3 rcrahul

Related Questions