Data tab does not load.

Question

I use tabs to display clear content, but one of them has stopped loading because it is located on the "Move Data" tab. This is a sheet map. Here is the code:

---

Navigator 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 appeared well before I put it on the tab, does anyone have an idea why it is not working now? Thanks =)

Answer 1

Welcome to SO!

If your sheet map unexpectedly works correctly after resizing the browser window , then you get the classic "map container size is not valid when initializing the map": for proper operation, Leaflet reads the size of the map container when initializing the map ( L.map("mapContainerId") ).

If your application hides this container (usually using CSS display: none; or some tab framework / modal / whatever ...) or later resizes it, Leaflet will not know about the new size. Therefore, it will not display correctly. Typically, he downloads tiles only for the fraction of the container that, in his opinion, is displayed. This can be a single tile in the upper left corner in the case of a container that was completely hidden during map initialization.

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

The flyer listens to the browser window resize event and reads the container size again when this happens. This explains why the card suddenly works when the window is resized.

You can also manually start this update by calling map.invalidateSize() when the tab bar is displayed (for example, add a listener to the tab button click), at least the first time the container is displayed with its correct size.

As for the implementation of the click button on the tab, do a new SO search in this section: you should have enough resources for this, for most popular frameworks.

Answer 2

Firstly, thanks @ghybs for a good explanation of why Leaflet cards do not display properly in these cases.

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

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

This fix worked for me, and it should work in every case.