Leaflet map not displayed properly inside tabbed panel
Solution 1:
It's a complete hack from messing with the leaflet.js source code, but it works (at least in jsFiddle) http://jsfiddle.net/C7Rp8/4/
The idea is from Google Maps, to "resize" or "redraw" the map when its container div is resized.
The changes I made are:
add id link3
to the 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 line is taken from trackResize in leaflet.js
Update from the comments: Hi, I used map.invalidateSize(false); instead of L.Util.requestAnimFrame(... and this also seems to work. Just thought I'd point this out. Great answer though! – Herr Grumps
Solution 2:
Bootstrap 3 has custom namespaced events, and so previous answers would work with:
$("body").on("shown.bs.tab", "#link3", function() {
map.invalidateSize(false);
});
Reference: Bootstrap Tabs