Leaflet Map not showing in bootstrap div

Question

This is a super odd problem that I can not figure out. I have my div with the map and its css styling. The Leaflet map is showing up in one rectangle and not in the div. Its

Answer 1

Execute the following function once the map is opened:

map.invalidateSize();

This will fix your problem.

Answer 2

This worked for me,

$('#showTravel').on('shown.bs.modal', function (e) {
  //creation of map
})

Or search in event of showing the div and into function creating the map

Answer 3

I used it with hided divs, which appear after a click. The tiles were also not visible, so I added map.invalidateSize() to the jQuery function where the div is set visible. Hope that helps...

Answer 4

I have the same issue to display map inside Bootstrap Tabs. I have fixed it by using -

 $('#gmap').on('shown.bs.tab', function (e) {
    //clear map first
    clearMap();
    //resize the map
   map.invalidateSize(true);
   //load the map once all layers cleared
   loadMap();
})