Leaflet map not displayed properly inside tabbed panel

Question

I'm trying to use Leaflet.js to display a map inside a tabbed panel from Twitter Bootstrap, but is behaving in a strange way:

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

Even more strange is that if I resize the browser, suddenly it works perfectly, until I reload again, so I would guess is a problem with the css, but I cannot find the problem.

Also, placing the map outside of the tabbed panel works great.

I tested in Firefox and Chrome, and both have the same issue.

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

Any help is really appreciated!

Tina CG Hoehr · Accepted Answer · 2012-08-31T12:24:17.330

53

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

edited Aug 31 '12 at 12:24

answered May 26 '12 at 02:05

Tina CG Hoehr

6,721
6
44
57

That worked great! So it's a common issue with all the maps loaded in hidden divs? – jasalguero May 26 '12 at 09:52
I really only know Google Maps API, so I can't say about other map implementations, for example there's also Openlayers/OpenStreetMap. In this case I was lucky that the redraw tactic worked :) – Tina CG Hoehr May 26 '12 at 14:40
1

@Eamorr Just saw your comment, it put a smile to my face :) – Tina CG Hoehr Aug 06 '12 at 01:38
17

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 Aug 31 '12 at 10:04
Ain't this a matter of relative/absolute position of the tab ? – Augustin Riedinger Sep 16 '13 at 14:08
invalidateSize works, but it reloads all the map tiles, which doesn't look all that good. Is there a way to achieve this without leaflet reloading the tiles? – Constant Meiring Apr 04 '14 at 11:56
This also helped me in an app not using Bootstrap but Ratchet. Thanks for sharing! – Sebastian Sastre Oct 11 '15 at 21:51

score 21 · Answer 2 · answered Jun 17 '14 at 17:05

21

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

answered Jun 17 '14 at 17:05

youanden

376
2
12

Leaflet map not displayed properly inside tabbed panel

2 Answers2

Linked