Question

-4

Leaflet map not displayed properly inside tabbed panel

rated 0 times [ 3] [ 7] / answers: 1 / hits: 26529 / 12 Years ago, sat, may 26, 2012, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

quentinaveryb

Add To Favorites

Follow

Total Points: 102

Total Questions: 100

Total Answers: 93

Location: Colombia

Member since Mon, May 2, 2022

2 Years ago

quentinaveryb questions

1 How to use annotation layer in PDF.js?

Thu, Aug 6, 20, 00:00, 4 Years ago

1 Cannot assign to read only property of #< Object> using React with Recoil

Sat, Jul 18, 20, 00:00, 4 Years ago

1 Strapi JWT token lifetime?

Fri, Jul 17, 20, 00:00, 4 Years ago

1 What is the difference between async await and a regular fetch?

Tue, Feb 4, 20, 00:00, 4 Years ago

1 How do I include a JavaScript variable in an HTML header?

Mon, Aug 12, 19, 00:00, 5 Years ago

View All

answered 12 Years ago tammyb · Accepted Answer

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