Leaflet map not displayed properly inside tabbed panel
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
Leaflet map not showing despite following quick-start guide
You import the Leaflet JavaScript file and have your page code within the same HTML <script>
tag. In such case, browsers are supposed to ignore (not execute) the content between the script tags, i.e. your page code is not executed.
Simply separate in 2 different script tag pairs:
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
// etc.
</script>
Data-toggle tab does not download Leaflet map
Welcome to SO!
If your Leaflet map suddenly works correctly after you resize your browser window, then you experience the classic "map container size not valid at map initialization": in order to work correctly, Leaflet reads the map container size when you initialize the map (L.map("mapContainerId")
).
If your application hides that container (typically through CSS display: none;
, or some framework tab / modal / whatever…) or later changes its dimensions, Leaflet will not be aware of the new size. Hence it will not render correctly. Typically, it downloads tiles only for the fraction of the container it thinks is shown. This can be a single tile in the top left corner in the case of a container that was entirely hidden at map initialization time.
This mistake often arises when embedding the map container in a "tab" or "modal" panel, possibly using popular frameworks (Bootstrap, Angular, Ionic, etc.).
Leaflet listens to browser window resize event, and reads again the container size when it happens. This explains why the map suddenly works on window resizing.
You can also manually trigger this update by calling map.invalidateSize()
when the tab panel is displayed (e.g. add a listener on the tab button click), at least the first time the container is rendered with its correct dimensions.
As for implementing the tab button click listener, perform a new search on SO on that topic: you should have plenty resources available for that matter, for most of the popular frameworks.
Leaflet map does not show up properly. Partially grey.
See Data-toggle tab does not download Leaflet map.
You probably need a longer delay before calling map.invalidateSize()
. Ideally listen to the event that opens your map container to its correct size.
Related Topics
Screen Styling When Virtual Keyboard Is Active
Vue.Js - Add Class to Clicked Button
Detecting Touch Screen Devices with JavaScript
Create an Array of Characters from Specified Range
Handle Response - Syntaxerror: Unexpected End of Input When Using Mode: 'No-Cors'
Jquery in Greasemonkey 1.0 Conflicts with Websites Using Jquery
Static Variables in JavaScript
Difference Between Domcontentloaded and Load Events
Queryselector and Queryselectorall VS Getelementsbyclassname and Getelementbyid in JavaScript
Hide Scrollbar and Show on Hover Like Facebook's New Chat Sidebar
Unable to Scroll in Scrollview
Using JavaScript in Android Webview
How to Use a Ruby Loop Inside of Haml's :JavaScript Region
Why Does the Setinterval Callback Execute Only Once
Correct JavaScript Inheritance
How to List the Properties of a JavaScript Object
How to Use JavaScript Conditionally Like CSS3 Media Queries, Orientation