3

I'm trying to put a different map using Leaflet in 2 bootstrap tabs. My problem is when I switch to the other map, the map is not well rendered. If I zoom out, I can see the whole map in a small square in the middle of my tab's body. If I resize my browser (I'm using chrome), the map resize too and works, but the problem come back each time I'm switching between maps.

        <div class="row">
            <ul class="nav nav-tabs" id="map-tab">
                <li id="tab-suivi" class="active">
                    <a href="#map-suivi" data-toggle="tab">Suivi</a>
                </li>
                <li id="tab-alarm" class="">
                    <a href="#map-alarm" data-toggle="tab">Alarme</a>
                </li>
            </ul>
            <div id="cartoTabContent" class="tab-content">
                <div class="tab-pane fade active in" id="map-suivi">
                </div>
                <div class="tab-pane fade in" id="map-alarm">
                </div>
            </div>
        </div>



    var mymap = L.map('map-suivi').setView([47.786, -3.320], 13);
    var mymapalarm = L.map('map-alarm').setView([47.786, -3.320], 13);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);


    // add an OpenStreetMap tile layer
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymapalarm);

I found some post here on SO from people having similar issue with multiple maps, but none of their solutions worked for me.

Karim Harazin
  • 1,463
  • 2
  • 16
  • 34
Morgan
  • 476
  • 9
  • 23
  • 2
    Have a look at [invalidateSize()](http://leafletjs.com/reference-1.0.0.html#map-invalidatesize) - maybe calling it initially (for both maps) or after chaning the tab may help? – Krxldfx Sep 22 '16 at 08:22
  • Nop, I tried both and it doesn't work – Morgan Sep 22 '16 at 08:30
  • When I hit F12 (chrome debug) it makes the map working well – Morgan Sep 22 '16 at 08:33
  • Please try to provide a working jsfiddle, so people may experiment. Until then, my guess is this: When your application runs, the first tab pane is shown while the other tab pane is hidden. The first map renders fine on the shown tab pane, while rendering of the other map is unpredictable, because the tab pane is hidden. When the active tab pane switches from the first to the second, the second pane / second map does not detect a reason to refresh right there. So, try this: http://stackoverflow.com/a/29184836/5289359 refreshing the corresponding map in the callback's body. – xnakos Sep 22 '16 at 10:30
  • 3
    @Morgan What you describe is **definitely** a symptom of a map initialized before its container has its final size. Note that when you open the developer console (F12), this resizes the window available for your webpage, hence Leaflet automatically calls `invalidateSize`. See https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map/36257493#36257493 – ghybs Sep 22 '16 at 10:37
  • I was wrong when I said to Krxldfx that calling invalidatingSize() doesn't work. In fact, I cannot manage to catch the "shown" callback within this code : $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var target = $(e.target).attr("href") // activated tab alert(target); }); I don't know why – Morgan Sep 22 '16 at 11:25
  • Can you specify your problem with the function? Actually calling map.invalidateSize() inside the function body should do the trick. – Krxldfx Sep 23 '16 at 11:21
  • The function was never called, I found a solution yesterday with that function : (function ($) { $(function () { $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) { mymap.invalidateSize(); mymapalarm.invalidateSize(); }); }); }(jQuery)); – Morgan Sep 23 '16 at 11:35

0 Answers0