La carte du dépliant ne s'affiche pas correctement dans le panneau à onglets

Question

J'essaie d'utiliser Leaflet.js pour afficher une carte à l'intérieur d'un panneau à onglets de Twitter Bootstrap, mais il se comporte d'une manière étrange :

Lorsque je clique sur l'onglet contenant le panneau, il y a une couche grise au-dessus de la carte. Si je fais glisser et déplace la carte, je peux voir d'autres tuiles, mais pas les tuiles initiales.

Ce qui est encore plus étrange, c'est que si je redimensionne le navigateur, tout à coup il fonctionne parfaitement, jusqu'à ce que je recharge à nouveau, donc je suppose que c'est un problème avec le css, mais je ne peux pas trouver le problème.

De même, le fait de placer la carte à l'extérieur du panneau à onglets fonctionne très bien.

J'ai testé dans Firefox et Chrome, et les deux ont le même problème.

J'ai créé un test dans jsfiddle pour le voir "en direct" : http://jsfiddle.net/jasalguero/C7Rp8/1/

Toute aide est vraiment appréciée !

Answer 1

C'est un bidouillage complet à partir du code source de leaflet.js, mais cela fonctionne (au moins dans jsFiddle). http://jsfiddle.net/C7Rp8/4/

L'idée est tirée de Google Maps, qui consiste à "redimensionner" ou à "redessiner" la carte lorsque son conteneur div est redimensionné.

Les changements que j'ai faits sont :

ajouter l'id link3 au petit onglet en HTML

<a href="#lC" data-toggle="tab" id="link3">tab3</a>

ajouter un écouteur à cet onglet à l'intérieur $(function() {

$("body").on('shown','#link3', function() { 
  L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container);
});

La ligne requestAniMFrame est reprise de trackResize dans leaflet.js

Mise à jour des commentaires : Bonjour, j'ai utilisé map.invalidateSize(false) ; au lieu de L.Util.requestAnimFrame(... et cela semble également fonctionner. J'ai juste pensé que je devais le signaler. Excellente réponse cependant ! - Herr Grumps

Answer 2

Bootstrap 3 a des événements personnalisés et espacés par des noms, et donc les réponses précédentes fonctionneraient avec :

$("body").on("shown.bs.tab", "#link3", function() {
    map.invalidateSize(false);
});

Référence : Onglets Bootstrap