Data-toggle tab does not download Leaflet map

Question

I am using tabs to display clear content, but one of them stopped downloading well since it is in the data-toggle tab. It is a Leaflet map. Here is the code :

---

Navbar code :

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Données principales</a></li>
    <li><a data-toggle="tab" href="#carte">Carte</a></li>
</ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">Lorem ipsum</div>
    <div id="carte" class="tab-pane fade"> **//see script below\\** </div>
</div>

---

Script :

<div id="carteBenef"></div>
      <script type="text/javascript">
          $(document).ready(function () {
              var map = new L.Map('carteBenef');
              var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
                     subDomains = ['otile1', 'otile2', 'otile3', 'otile4'],
                     cloudmadeAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>';
              var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains});
              var iades = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>)
              map.addLayer(cloudmade).setView(iades, 15);
              var benefLocation = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>);
              var benef = new L.Marker(benefLocation);
              map.addLayer(benef);
              benef.bindPopup("<?php echo htmlspecialchars($beneficiaire->nom) . ' ' . htmlspecialchars($beneficiaire->prenom); ?>").openPopup();
          });
      </script>

The map was appearing well before I put it in the tab, does someone have an idea why it does not work now? Thank you =)

Answer 1

Welcome to SO!

If your Leaflet map suddenly works correctly after you resize your browser window, then you experience the classic "map container size not valid at map initialization": in order to work correctly, Leaflet reads the map container size when you initialize the map (L.map("mapContainerId")).

If your application hides that container (typically through CSS display: none;, or some framework tab / modal / whatever…) or later changes its dimensions, Leaflet will not be aware of the new size. Hence it will not render correctly. Typically, it downloads tiles only for the fraction of the container it thinks is shown. This can be a single tile in the top left corner in the case of a container that was entirely hidden at map initialization time.

This mistake often arises when embedding the map container in a "tab" or "modal" panel, possibly using popular frameworks (Bootstrap, Angular, Ionic, etc.).

Leaflet listens to browser window resize event, and reads again the container size when it happens. This explains why the map suddenly works on window resizing.

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.

As for implementing the tab button click listener, perform a new search on SO on that topic: you should have plenty resources available for that matter, for most of the popular frameworks.

Answer 2

First, thank you @ghybs for your good explanation on why the Leaflet maps are not shown properly in these cases.

For those who tried unsuccessfully the @ghybs's answer, you should try to resize your browser instead of calling a method of the map object :

window.dispatchEvent(new Event('resize'));

As @MarsAndBack said, this fix may cause issues on pan/animation/etc features that Leaflet's invalidateSize provides.