Leaflet map not displayed properly inside tabbed panel

by

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

More Related Contents:

  1. My code dont works but I don't know why [closed]
  2. Datepicker validation 18 years of age [closed]
  3. Should the Bootstrap media queries be saved in a css file or a js file?
  4. Data-toggle tab does not download Leaflet map
  5. Navbar dropdown (collapse) is not working in Bootstrap 5
  6. Bootstrap modal appearing under background
  7. Changing nav-bar color after scrolling?
  8. Bootstrap close responsive menu “on click”
  9. How to create a sticky navigation bar that becomes fixed to the top after scrolling
  10. Disable click outside of bootstrap modal area to close modal [duplicate]
  11. Bootstrap 4 File Input
  12. How to partition input field to appear as separate input fields on screen?
  13. How to create a responsive image that also scales up in Bootstrap 3
  14. How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?
  15. Trees in Twitter Bootstrap [closed]
  16. Bootstrap modal: background jumps to top on toggle
  17. Bootstrap Dropdown with Hover
  18. TypeError: $(…).modal is not a function with bootstrap Modal
  19. How to resize Twitter Bootstrap modal dynamically based on the content
  20. How to add smooth scrolling to Bootstrap’s scroll spy function
  21. How to get a leaflet map canvas to have a 100% height?
  22. Bootstrap Dropdown menu is not working
  23. Bootstrap button drop-down inside responsive table not visible because of scroll
  24. “Force Reflow” in CSS transitions in Bootstrap
  25. How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?
  26. CSS selector for targeting only immediate children and not other identical descendants
  27. Can I transition the flex-grow of a flex box to produce an animation?
  28. How to show hidden divs on mouseover?
  29. HTML5 input required, scroll to input with fixed navbar on submit
  30. Get Element StyleSheet Style in JavaScript

Leave a Comment