CODEWITHSUNDEEP
javascripttwitter-bootstrapleaflet
workingxx
workingxx

Reputation: 226

Leaflet Map not showing in bootstrap div

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. enter image description here

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.

Upvotes: 6

Views: 6005

Answers (4)

Tajuddin
Tajuddin

Reputation: 73

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

Upvotes: 0

fabian
fabian

Reputation: 1

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

Upvotes: 0

NetThinks
NetThinks

Reputation: 1

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

Upvotes: 0

Titsjmen
Titsjmen

Reputation: 809

Execute the following function once the map is opened:

map.invalidateSize();

This will fix your problem.

Upvotes: 4

Related Questions