Leaflet map not showing properly in bootstrap 3.0 modal

Question

i have a big problem. i want to open a leaflet map in a modal. but the map is not showing properly. the tiles are not loading. here is the script: https://codeply.com/p/TYUqgVvYAQ ``` Open Map

Accepted Answer

I think what is happening is that, when the map is created, the container width/height for your `map-canvas' element has not yet been adjusted to the width/height of the modal dialog. This causes the map size to be incorrect (smaller) than what it should be.

You can fix this by calling `map.invalidateSize()`. This will work to re-adjust the width/height bounds of the L.Map's container.

You can automatically call this by hooking into the event where the Bootstrap modal becomes shown.

```
$('#myModal').on('show.bs.modal', function(){
  setTimeout(function() {
    map.invalidateSize();
  }, 10);
 });
```

Insert this code into your JavaScript. When the modal is shown, the map will then invalidate its size. The timeout is because there may be some animation/transition time for the modal to display and be added to the DOM.

Leaflet map not showing properly in bootstrap 3.0 modal

Solution

Problem