The sheet map does not display correctly inside the tab bar

Question

I'm trying to use Leaflet.js to display a map inside a tabbed panel from Twitter Bootstrap, but it behaves in a weird way:

When I click on the tab containing the panel, a gray layer is displayed on top of the map. If I drag and move the map, I get to see other tiles, but not the original ones.

Even stranger is that if I resize the browser, it will suddenly stop working until I restart again, so I think this is a problem with css, but I cannot find the problem.

Also, placing the map outside the tab bar works great.

I tested in Firefox and Chrome and they have the same problem.

I created a test in jsfiddle to see it live: http://jsfiddle.net/jasalguero/C7Rp8/1/

Any help really appreciated!

Answer 1

This is a complete hack from messing with leaflet.js source code, but it works (at least in jsFiddle) http://jsfiddle.net/C7Rp8/4/

The idea is to google maps, "resize" or "redraw" the map when you resize the container.

The changes I made are as follows:

add id link3 to small tab in HTML

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

add a listener to this tab inside $(function() {

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

The requestAniMFrame string is taken from trackResize in leaflet.js

Update from comments : Hi, I used map.invalidateSize (false); instead of L.Util.requestAnimFrame (... and it works too. Just thought I would point it out. Great answer though! - Herr Grumps

Answer 2

Bootstrap 3 has custom events with names, so previous answers will work with:

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

Link: boot tabs