Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Leaflet map not displayed properly inside tabbed panel

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!

like image 494
jasalguero Avatar asked May 26 '12 01:05

jasalguero


People also ask

Why is map not showing in Leaflet?

There are a number of reasons why your map might not be displaying: You have an error in your JavaScript (most likely) - use whichever debugging tool is provided with your browser to verify. you are using Internet Explorer and you have Compatibility mode ON....

Can I use Google Maps on my Leaflet?

This article helps the user to render the map on the page using Leaflet. Using the leaflet, we can render the map into an HTML element and we can set the marker on the map. Leaflet works efficiently across all major desktop and mobile platforms.

How do I use plugins in Leaflet?

You can attach the Leaflet plugin to your map with the help of Github or any other repository via adding the additional . js and . css file into the leaflet html file in the header section. The leaflet plugins really improves the performance and usability of Leaflet Js.


2 Answers

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

like image 150
Tina CG Hoehr Avatar answered Sep 19 '22 00:09

Tina CG Hoehr


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

like image 35
youanden Avatar answered Sep 21 '22 00:09

youanden