Resize of container Issue

Probably related to

• https://github.com/alex3165/react-mapbox-gl/issues/445
• https://github.com/alex3165/react-mapbox-gl/issues/372
• https://github.com/alex3165/react-mapbox-gl/issues/395
• https://github.com/alex3165/react-mapbox-gl/issues/130
• https://github.com/alex3165/react-mapbox-gl/issues/32

So the structure I have is something like this

<style>
.container {
	display: flex;
	flex-flow: row nowrap;
	width: 100vw;
	height: 100vh;
}

aside {
	width: 300px;
	height: 100%;
	transition: width 0.2s ease;
}

aside.collapsed {
	 width: 0px;
}

.map {
	flex: 1 1 auto;
}
</style>


<div class="container">
	<aside>
		<span>controls</span>
	</aside>
	<div class="map">
	</div>
</div>

When I collapse the sidebar, the size of the map doesn’t get updated as it should, I tried forcing a map.resize() when the sidebar is toggled, the problem is that as it has a transition I had to do this

  const sidebarAnimationDuration = 220;
  afterCollapse = () => {
    window.setTimeout(() => {
      window.dispatchEvent(new Event('resize'));
    }, sidebarAnimationDuration);
  };

  setCollapse = collapsed => {
    this.setState({ collapsed }, this.afterCollapse);
  };

Which feels like a messy hack, is there any better way of doing this ?

[ro2nie]

This is how I made it work, by using a ResizeObserver:

const ro = new ResizeObserver(() => {
    if (map) {
        map.resize();
    }
});

// Observe the map div container.
ro.observe(document.getElementById('map'));

If you are using Angular, you might need a polyfill for ResizeObserver, or just do:

const ro = new (window as any).ResizeObserver(() => {
    if (this.map) {
        this.map.resize();
    }
});

ro.observe(document.getElementById('map'));

[JClackett]

any update on this? the above solutions dont feel right