CODEWITHSUNDEEP
javascriptcssreactjsleafletreact-leaflet
Owen
Owen

Reputation: 308

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

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.

enter image description here

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

Upvotes: 0

Views: 1489

Answers (1)

kboul
kboul

Reputation: 14600

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

Upvotes: 3

Related Questions