mapa Folleto no se muestran correctamente en el interior del panel de pestañas

Question

Estoy intentando utilizar Leaflet.js para mostrar un mapa dentro de un panel con pestañas de Twitter Bootstrap, pero se comporta de una manera extraña:

Cuando hago clic en la pestaña que contiene el panel, hay una capa gris en la parte superior del mapa. Si arrastro y muevo el mapa, puedo ver otros mosaicos, pero no los iniciales.

Aún más extraño es que si cambio el tamaño del navegador, de repente funciona perfectamente, hasta que vuelvo a cargar, así que supongo que es un problema con el CSS, pero no puedo encontrar el problema.

Además, colocar el mapa fuera del panel con pestañas funciona muy bien.

Probé en Firefox y Chrome, y ambos tienen el mismo problema.

creé una prueba en la jsFiddle para verlo "en vivo": http://jsfiddle.net/jasalguero/C7Rp8/1/

Cualquier ayuda es muy apreciada!

Answer 1

Es un corte completo de jugar con el código fuente leaflet.js, pero funciona (al menos en jsFiddle) http://jsfiddle.net/C7Rp8/4/

La idea es de Google Maps, a "redimensionar" o "dibujar" el mapa cuando su contenedor div se redimensiona.

Los cambios que he realizado son:

Añadir Id link3 a la pequeña pestaña en HTML

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

añadir un oyente a esta ficha dentro $(function() {

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

La línea requestAniMFrame se toma de trackResize en leaflet.js

Actualización de los comentarios: Hola, utilicé map.invalidateSize (false); en lugar de L.Util.requestAnimFrame (... y esto también parece funcionar. Solo pensé en señalarlo. ¡Gran respuesta! - Herr Grumps

Answer 2

Bootstrap 3 tiene eventos de espacio de nombres personalizados, por lo que las respuestas anteriores trabajar con:

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

Referencia: Bootstrap Tabs