4

I want to create website with Leaflet map placed in bootstap tab. If I switch into tab where is Leaflet instantion tiles are not loading correct(I see the grey background). I guess there is a problem with size of a because if resize the browsers window tiles load correctly. Any ideas? Here is my basic concept.

https://jsfiddle.net/rjper9nz/6/

Improve this question
1

1 Answer 1

Reset to default
5

Your map's tiles have to be realoaded, which can be done with the method invalidateSize:

map.invalidateSize();

Which is not sufficient to solve the issue because firing this method right at the beginning does not have any effect.

You only want to fire it after the tab container has loaded, so you need to know when that happens.

The following code does that and fixes your issue:

 $("a[href='#menu1']").on('shown.bs.tab', function(e) {
      map.invalidateSize();
 });


PS: I have renamed your variable mymap to map, because most people looking this up will call it map, so make sure to change that.

Improve this answer
3
  • I have reference not defined for map at the point I show the container. How to get map?
    – Sashko Lykhenko
    Commented Sep 26, 2018 at 19:41
  • map is the map variable, as in var map = L.map(.... So, whatever you called your map variable you need to add where I put map.
    – BritishSteel
    Commented Sep 26, 2018 at 21:47
  • map.invalidateSize() worked for me. I was having problems refreshing the tiles after I applied the style display: none; to the map element and then restoring it to display: block . According the documentation: "Checks if the map container size changed and updates the map if so".
    – aizquier
    Commented Jul 18, 2019 at 21:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.