Leaflet.js Map Not taking up Full Width [React.js]

Question

I have a leaflet.js Map that is not appearing full height inside the div, or full width, even with 100% full height declared in the CSS. The Code and Video is below.

https://codesandbox.io/s/determined-napier-wywxg

kboul · Accepted Answer · 2020-11-25 16:28:44Z

3

Provide width and height equal to 100% to your parent div on MapContainer and listen to whenCreated prop event on MapContainer. There use map.invalidateSize in combination with setInterval event

 <LeafletMap  center={[34.80746, -40.4796 ]} zoom={3} 
              whenCreated={map => setInterval(() =>{ map.invalidateSize()}, 100)}
              style={{width: '100%', height: '100%'}}>
              <TileLayer 
               url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
               attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              />
  </LeafletMap>

Demo

answered Nov 25, 2020 at 16:28

kboul

14.7k5 gold badges50 silver badges60 bronze badges

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

Collectives™ on Stack Overflow

Leaflet.js Map Not taking up Full Width [React.js]

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related