Canvas Size issues

Hi, Im my code I have the following structure

<div>
<some other div>
<the map>
</div>

“Some other div” is sometimes there and sometimes not. In one case the map gets 50% for the containerStyle and in the other case 100%. The initial rendering is always correct. When “some other div” is not rendered the <div class=“mapboxgl-map” updates correctly, but the canvas still got the old width. When I slightly change the window size, the canvas updates to the correct value. Do you have any hint on how to force the canvas to update.

Thanks Andreas

[victcebesp]

Hello guys! I am still having this issue and I am currently using version 7.0.7 from react-map-gl. The issue is that now the property onStyleLoad is not available on the react-map-gl Map so that is no longer a solution and the issue is still active. The rendered canvas is first rendered with an incorrect width and height. However, once I resize the window, it is correctly resized. Any clues?

Thanks!

[mlg87]

@dedan call it on the map that is passed to onStyleLoad (i suppose you could probably also do it in componentDidMount assuming you have a ref to the map and its defined). here is an example:

render() {
  return (
    <ReactMapboxGlMap
      containerStyle={{ height: '100%', width: '100%' }}
      onStyleLoad={this.handleStyleLoad}
    />
  )
}

handleStyleLoad = map => (map.resize())