react-leaflet / there is problem with Mapcontainer

Question

the component render well but It doesn't display so I change some css property from Inspect. I put map container in part of my page in div - but map work differently from div. this is my code.

<div className={style.map_container}> //this my container I wrote it <MapContainer style={{height:'80px',width:'80'}} center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}> <TileLayer attribution='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>

also I put main css of leaflet on index.html

I don't what am I doing but I think there is problem with css.

mohsen Ghalandar · Accepted Answer · 2022-01-23 08:42:10Z

the main property that you should assign is height - I should just set height in inline css proerty to my component ,

react-leaflet you have to consider this rule

<MapContainer style={{width:'90%',height:'99%'}} center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>

ta-daaa!!! map work very well

StarshipBot · Accepted Answer · 2025-02-20 11:54:20Z

0

A CSS styles import was missing. Add import "leaflet/dist/leaflet.css";

edited Feb 20 at 11:54

StarshipBot

295 bronze badges

answered Feb 19 at 19:10

Edward Koetsjarjan

1

Collectives™ on Stack Overflow

react-leaflet / there is problem with Mapcontainer

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related