4

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.enter image description here

2 Answers 2

1

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

Sign up to request clarification or add additional context in comments.

Comments

0

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.