CODEWITHSUNDEEP
htmlcssleaflet
java acm
java acm

Reputation: 1050

fix leafletjs map div that have two fixed position parents

i have a structure for all pop-up panels (that could not to change it because it's a required feature) one of them is map div but parents are fixed position and map div could not to sense how to set on a fixed parent div
i make a Fiddle for that :

Fiddle Link is Here

it have a map show button but before to click it please drag the result panel to up and left for seeing exact problem then click on button

if you see map div is exist but main map coordinate is not set to center and also drifted by left and up

so in now a little drag result panel (panel of fiddle) and you see map will be correct

how can i to fix this css problem ?

css:

#popup{
position: fixed;
z-index: 9998;
background-color: rgba(0,0,0,.3);
height: 100vh;
width: 100vw;
display: none;
overflow: auto;
}
#parent{
background-color: #00ff26;
position: fixed;
z-index: 9999;
padding: 5px;
display: none;
border-radius: 10px;
}
#parent *{
padding: 2px;
border-radius: 5px;
display: block;
margin-bottom: 5px;
}
#map{
    height: 320px;
    width: 320px;
}

html:

<div id="popup">
<div id="parent">
 <!--this map is in two fixed div parent that not work-->
<div id="map"></div>
</div>
</div>
<input type="submit" value="show map" id="mapbt">
<!--this map is worked please uncomment it by ctrl + / and comment upper #map -->

<!-- <div id="map"></div> -->

js:

function mapper(mapID) {
centerPoint =  [51.5, -0.09];
zoom = 16;
var map = L.map(mapID, {
    center: centerPoint,
    maxZoom: 22,
    zoom: zoom,
    zoomControl: true,
    attributionControl: true,
    doubleClickZoom: false
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OSM</a> contributors'}).addTo(map);
    L.marker(centerPoint, {draggable: true}).addTo(map);
}

function setPopup(panel, parentModal) {
parentModal.css("display", "inline-block");
this.close = function close() {
    panel.css("display", "none");
    parentModal.unbind("click").css("display", "none");
}

parentModal.click(close);
panel.submit(close);

var w1 = panel.outerWidth() / 2,
h1 = panel.outerHeight() / 2,
w2="50vw",
h2 = "50vh";

panel.css({"display": "inline-block", "top": "calc(" + h2 + " - " + h1 + "px)", "left": "calc(" + w2 + " - " + w1 + "px)"});
}
$("#mapbt").click(function(){
 setPopup($("#parent"), $("#popup"));
})
mapper("map");

Upvotes: 0

Views: 672

Answers (1)

chrki
chrki

Reputation: 6323

You need to call map.invalidateSize(); after the popup is shown and the map element has loaded/rendered.

https://jsfiddle.net/hpfe07yy/1/

Upvotes: 1

Related Questions