2

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/

1

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.

  • I have reference not defined for map at the point I show the container. How to get map? – Sashko Lykhenko Sep 26 '18 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 Sep 26 '18 at 21:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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