Canvas width/height don't update when container's width/height are changed about react-map-gl HOT 5 OPEN

This is not a bug. v7 follows mapbox-gl's own behavior, which does not monitor the resize of your container. You are supposed to call resize yourself.

from react-map-gl.

I was able to workaround this by manually calling mapboxgl.Map.resize() inside a useEffect that also gets triggered when those dimensions change. Maybe this is a clue for a solution.

from react-map-gl.

So this kinda falls into this item? (from the Upgrading docs):

All map controls' props are now strictly aligned with their mapbox-gl counterparts. In heading this direction, we are able to remove a significant amount of custom code and have the components behave more predictably for developers switching from the native library. If your application is relying on an old feature that is no longer supported, please open a topic on Discussion so we can review on a case-by-case basis.

Adding this feature can be considered but I'm also fine with the workaround above. Mentioning it in the documentation could also be helpful—spent quite a lot of time debugging and making sure it was not an issue with my implementation.

You are supposed to call resize yourself.

What explains it fixing itself when the browser window is resized? Is mapbox-gl handling it?

from react-map-gl.

What explains it fixing itself when the browser window is resized? Is mapbox-gl handling it?

Yes. mapbox-gl's trackResize option (default true) adds a listener to window.resize.

from react-map-gl.