Карта листов не отображается правильно внутри панели вкладок

Я пытаюсь использовать Leaflet.js для отображения карты внутри панели с вкладками из Twitter Bootstrap, но ведет себя странным образом:

Когда я нажимаю на вкладку, содержащую панель, поверх карты отображается серый слой. Если я перетаскиваю и перемещаю карту, я получаю, чтобы видеть другие плитки, но не исходные.

Еще более странно, что если я изменил размер браузера, он внезапно прекратит работу, пока я не перезагружу снова, поэтому, я думаю, это проблема с css, но я не могу найти проблему.

Кроме того, размещение карты вне панели вкладок отлично работает.

Я тестировал в Firefox и Chrome, и у них одинаковая проблема.

Я создал тест в jsfiddle, чтобы увидеть его "вживую": http://jsfiddle.net/jasalguero/C7Rp8/1/

Любая помощь действительно оценена!

Ответы

Ответ 1

Это полный взлом из messing с исходным кодом leaflet.js, но он работает (по крайней мере, в jsFiddle) http://jsfiddle.net/C7Rp8/4/

Идея заключается в Google Картах, "изменении размера" или "перерисовке" карты при изменении размера контейнера.

Изменения, которые я сделал, следующие:

добавить id link3 на маленькую вкладку в HTML

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

добавьте слушателя на эту вкладку внутри $(function() {

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

Строка requestAniMFrame берется из trackResize в leaflet.js

Обновление из комментариев: Привет, я использовал map.invalidateSize(false); вместо L.Util.requestAnimFrame(... и это тоже работает. Просто подумал, что я это укажу. Отличный ответ, хотя! - Herr Grumps

Ответ 2

Bootstrap 3 имеет пользовательские события с именами, поэтому предыдущие ответы будут работать с:

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

Ссылка: вкладки начальной загрузки