How to trigger mapbox resize on bootstrap-tab click - mapbox

Question

I have a mapbox map inside a bootstrap-3 tab like so:
<div id='resizeMap' class='button'>Resize map</div>
<div class="tabs">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#tab-87" aria-controls="tab-87" role="tab" data-toggle="tab">
Tab-1
</a>
</li>
<li role="presentation">
<a href="#tab-1034" aria-controls="tab-1034" role="tab" data-toggle="tab">
Tab-2
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" id="tab-87" class="tab-pane in active fade">
Some other content
</div>
<div role="tabpanel" id="tab-1034" class="tab-pane fade">
<div class="map-container" style="position:relative;width:100%; height:500px;">
</div>
</div>
</div>
The problem is that when I click on the 2nd tab (where the map is, the map does not have the right dimensions).
I can add a button to trigger resize as mentioned here but I can't figure out how to trigger resize automatically upon clicking a tab.
I also tried to "simulate" clicking as in:
$('a[data-toggle="tab"]').on( "click", function() {
$("#resizeMap").click();
});
This works, but only when I click the tab twice: if tab-1 is active, I click tab-2, the tab-content appears with the map not sized correctly, if I click on tab-2 for a second time, it resizes.
Thanks

Answer 1

For anyone else that may face this:
Not having access to the map instance, means that we have to define the call to map.resize() from within map.on('load', function(){...}).
Also, we need to make sure to resize after tab-switching. The following code resizes the map after the bootstrap animation finishes. Like so:
var map = new mapboxgl.Map({
container: 'site-map', // container id
style: 'mapbox://styles/mapbox/outdoors-v10',
center: [1, 49],
zoom: 5,
});
map.on('load', function () {
map.addSource('data',{
type: 'geojson',
data: someData,
cluster:true
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function(){
map.resize();
});
});

Answer 2

If you have access to the map instance (the return value of new mapboxgl.Map()), you can just call the resize method of the the map, after changing tabs: https://www.mapbox.com/mapbox-gl-js/api/#map#resize