react-map-gl <Map> is not fullscreen until resizing window

Question

I am using the ionic framework with React and trying to display a map via mapbox and react-map-gl.

It is working, but the map is only 100px * 100px or so until I resize the page. I have set the width and height css properties to 100vw and 100vh respectively like so:

  <Map
    style={{width: '100vw', height: '100vh'}}
    initialViewState={{
      longitude: -122.4,
      latitude: 37.8,
      zoom: 14
    }}
    mapStyle="mapbox://styles/mapbox/streets-v9"
  >
    <FullscreenControl />
  </Map>

What could cause it to not be 100 % width and height before resizing the page?

Answer 1

I had the same issue and was able to resolve it with a call to map.resize() in the map component onRender(). Try this:

<Map
    style={{width: '100vw', height: '100vh'}}
    initialViewState={{
        longitude: -122.4,
        latitude: 37.8,
        zoom: 14,
    }}
    mapStyle="mapbox://styles/mapbox/streets-v9"
    onRender={(event) => event.target.resize()}
>
    <FullscreenControl />         
</Map>

event is a MapboxEvent

event.target is a MapboxMap

MapboxMap which is actually a mapboxgl.Map instance has a resize function that can be called.

See react-map-gl API docs: https://visgl.github.io/react-map-gl/docs/api-reference/map#onrender