CODEWITHSUNDEEP
leafletbootstrap-modal
dwalin93
dwalin93

Reputation: 83

Leaflet map in modal

I have this modal in my index.html:

 <div id="myModal" class="modal">
   <span class="close1">&times;</span>
   <div id="mapImage1"></div>
   <div id="caption"></div>
 </div>

The <div id="mapImage1"> is the leaflet map <div>

Then I have the function, which should load the Leaflet map into the modal. The parameter image is the image which I would like to show on the leaflet map.

function modalImage(modal,image,modalDiv,text,close) {
// Get the modal

var modal = document.getElementById(modal);
var img = document.getElementById(image);
var modalDiv = document.getElementById(modalDiv);
console.log(modalDiv);
var captionText = document.getElementById(text);
img.onclick = function () {
    modal.style.display = "block";
    initLeafletimage(modalDiv,img);
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName(close)[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function () {
    modal.style.display = "none";
}
}

The map itself is generated by this code: 

function initLeafletimage(map,image){
console.log(image.src)
var imgDimensions={width:300, height:300} //this is the height and width of the image. It hasn't been loaded yet.

var map = L.map(map, {
    maxZoom: 24,
    minZoom: -24,
    crs: L.CRS.Simple
}).setView([imgDimensions.height/2, imgDimensions.width/2], 0);

var imageUrl = image.src;
var imageBounds = [
    [imgDimensions.width , 0],
    [0, imgDimensions.height]
];

L.imageOverlay(imageUrl, imageBounds).addTo(map);
}

modalImage('myModal','left','mapImage1','caption','close1');

The map is not even showing up in the modal.

What have I missed?

Upvotes: 1

Views: 2536

Answers (1)

dwalin93
dwalin93

Reputation: 83

Unfortunately, like @ghybs pointed out, I missed to define the height and width of the map div. That is why no map was present. With this css it works perfectly: 

#mapImage1{
  height: 100%;
  width: 100%;
  position: fixed;
}

Upvotes: 1

Related Questions