web-dev-qa-db-fra.com

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

J'essaie d'utiliser Leaflet.js pour afficher une carte à l'intérieur d'un panneau à onglets de Twitter Bootstrap, mais 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 vois d'autres tuiles, mais pas les premières.

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 trouve pas le problème.

De plus, placer la carte en dehors 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!

javascriptcsstwitter-bootstrapleaflet
49
jasalguero

C'est un hack complet de jouer avec le code source de leaflet.js, mais cela fonctionne (au moins dans jsFiddle) http://jsfiddle.net/C7Rp8/4/

L'idée vient de Google Maps, pour "redimensionner" ou "redessiner" la carte lorsque son div de conteneur est redimensionné.

Les modifications que j'ai apportées sont les suivantes:

ajoutez l'identifiant link3 au petit onglet en HTML

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

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

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

La ligne requestAniMFrame est tirée de trackResize dans leaflet.js

Mise à jour à partir des commentaires : Salut, j'ai utilisé map.invalidateSize (false); au lieu de L.Util.requestAnimFrame (... et cela semble aussi fonctionner. Je pensais juste le signaler. Excellente réponse cependant! - Herr Grumps

52
Tina CG Hoehr

Bootstrap 3 a des événements d'espaces de noms personnalisés, et les réponses précédentes fonctionneraient donc avec:

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

Référence: Onglets Bootstrap

18
youanden