1

Here is a simplified example of my problem.

I'm using Bootstrap 4 to create a page with multiple tabs, containing a leaflet map, dygraphs and other content in each tab.

When I switch between the tabs the map will not reload correctly. If I adjust the browser size slightly, the map will reload correctly. I can retrieve the tab ID using jQuery but haven't found a way to use it to reload the map correctly.

Here is a JSFiddle of my example: https://jsfiddle.net/scottgeowork/85w0oj4p/5/

var mymap1 = L.map('mapid1').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 10,
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(mymap1);

var marker1 = L.marker([51.5, -0.15]).addTo(mymap1);

var mymap2 = L.map('mapid2').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 10,
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(mymap2);

var marker2 = L.marker([51.5, -0.09]).addTo(mymap2);

$(document).ready(function() {
  $(".container-fluid").find(".nav-tabs").find("a").click(function() {
    tab = $(this).attr("href");
    document.getElementById("sel").innerHTML = tab;
    //$(tab).resize();
  });
});
<link href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>

<ul class="nav nav-tabs d-flex flex-wrap" id="myTab" role="tablist">
  <li class="nav-item" id="li1">
    <a class="nav-link active" id="lia1" href="#report1" role="tab" data-toggle="tab">Tab1</a>

  </li>
  <li class="nav-item" id="li2">
    <a class="nav-link" id="lia2" href="#report2" role="tab" data-toggle="tab">Tab2</a>
  </li>
</ul>
<div class="tab-content">
  <!-----------------------map1------------------------->
  <div role="tabpanel" class="tab-pane active" id="report1">
    <p>panel 1</p>
    <div id="mapid1" style="width: 400px; height: 300px;"></div>
  </div>
  <!-----------------------map2------------------------->
  <div role="tabpanel" class="tab-pane fade" id="report2">
    <p>panel 2</p>
    <div id="mapid2" style="width: 400px; height: 300px;"></div>
  </div>
</div>
scott
  • 61
  • 2
  • 6
  • Why do you need it to reload ? – Baptiste Aug 17 '17 at 09:17
  • In my haste my jsfiddle didn't seem to work correctly, I've adjusted and changed the link above. "Reload" might have been a little confusing but if you switch tabs in the jsfiddle the map in the second tab will not show up correctly until you resize the browser window, then if you go back to Tab1 that map will not appear correctly until you resize the browser. – scott Aug 22 '17 at 16:48

1 Answers1

1

I think this is your problem :

https://stackoverflow.com/a/36257493/5003342

You can also manually trigger this update by calling map.invalidateSize() when the tab panel is displayed (e.g. add a listener on the tab button click), at least the first time the container is rendered with its correct dimensions.

Baptiste
  • 1,688
  • 1
  • 15
  • 25