CODEWITHSUNDEEP
reactjsleafletreact-leaflet
Nafi
Nafi

Reputation: 129

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.

Upvotes: 7

Views: 2993

Answers (4)

Surajit Das
Surajit Das

Reputation: 81

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

Upvotes: 1

Tiến Trần
Tiến Trần

Reputation: 21

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

Upvotes: 2

rcrahul
rcrahul

Reputation: 131

try importing this line in your import section

import "leaflet/dist/leaflet.css"

Upvotes: 9

Nafi
Nafi

Reputation: 129

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?

Upvotes: 5

Related Questions