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!
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....
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.
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.
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With