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 as if the z index is wrong, but I can not figure it out. The JS is in the document.ready function. I added a border around the map div just to show how off everything is.

CSS:

#map {width:100%;height:100%;margin-left:10px;margin-top:40px}

HTML:

  <div id="showTravel" class="row" style="display:none">
        <div class="col-lg-12">
            <div class="wrapper wrapper-content">
        <h2 style="margin-top:-18px">All Travelers</h2>
        <div id="travelContent">
            <div id=map></div>
        </div>
            </div>
        </div>
    </div>

JS:

var map=L.map('map',{
        minZoom:2,
    maxZoom:18
}).setView([x,y],16);

var buildingIcon=L.icon({
    iconUrl:'/images/bicon.png',
    iconSize:[25,40],
    popupAnchor: [-3, -20],
    iconAnchor: [14, 38]
});

L.marker(x,y],{
    icon:buildingIcon,
    title:'town, state'
})
.bindPopup('<b>first last</b><br>Email: email address<br>Cell: phone number')
.addTo(map);

mapLink='<a href="http://openstreetmap.org">OpenStreetMap</a>';

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; ' + mapLink,
    maxZoom:18
}).addTo(map);

I have fixed the overlapping problem, but the last problem still exists i.e.,

When the page loads and the map is rendered on the document.ready() the map is only visible in the top left corner of the screen. And If I changes the size of the browser (maximize,minimize) then the map refreshes correctly.

Answer 1

Execute the following function once the map is opened:

map.invalidateSize();

This will fix your problem.