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=";>OpenStreetMap</a>';

L.tileLayer('http://{s}.tile.openstreetmap/{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.

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">OpenStreetMap</a>';

L.tileLayer('http://{s}.tile.openstreetmap/{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.

• javascript
• twitter-bootstrap
• leaflet

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Jun 24, 2015 at 15:38 workingxxworkingxx 22644 silver badges1717 bronze badges 10

• Which version of bootstrap are you using? – Suvi Vignarajah Commented Jun 24, 2015 at 15:58
• It is 3.3 just to confirm – workingxx Commented Jun 24, 2015 at 16:13
• 1 could you possibly need a position: relative; on your #map? – snkashis Commented Jun 24, 2015 at 16:20
• 1 I would also add proper quotation marks around your ID in the html. See <div id=map> – snkashis Commented Jun 24, 2015 at 16:21
• 1 Please check if you have included leaflet css file – muzaffar Commented Jun 25, 2015 at 7:20

 |  Show 5 more ments

4 Answers 4

Sorted by: Reset to default 4

Execute the following function once the map is opened:

map.invalidateSize();

This will fix your problem.

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...

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

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();
})