1

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

Community
  • 1
  • 1
fekioh
  • 894
  • 2
  • 9
  • 22

2 Answers2

4

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();
    });
});
fekioh
  • 894
  • 2
  • 9
  • 22
0

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

Scarysize
  • 4,131
  • 25
  • 37
  • That is the problem, I don't have access to the instance. That's why what I tried was similar to the link I posted above: `map.on('load', function () { ... var fixButton =$('a[data-toggle="tab"]') ... }` and then `fixButton.onclick = function() {map.resize();}`. This executes upon clicking the tab-header but before the tab-content div is resized. I should somehow run resize after the tab-switch finishes – fekioh Mar 17 '18 at 14:21
  • My comment above made google around a bit more. I will give shown.bs.tab a try : https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_tab_events&stacked=h – fekioh Mar 17 '18 at 14:37