i m working on a university project, and i m quite new to JS coding and i faced an issue, i am implementing my application using w3 libraries, and there is modal window which is shown when user click on the button, and this modal contains a Leaflet map, which isnt rendering properly, so I found a solution of this problem on Stackoverflow: Leaflet map not showing properly in bootstrap 3.0 modal so i tryied the proposed solution in that thread and put this in my JS code:
$('#parator_modal').on('show.w3.modal', function(){
setTimeout(function() {
mymap.invalidateSize();
}, 400);
});
but i faced another problem which i cant find a solution to. My map still renders badly, but when i resize browser window it seems to work fine(re-renders whole map, and shows a map properly), so i thought this problem might be time related, because modal might take too long to load and map invalidateSize() is executed before modal is loaded, and i tried to use different timeouts(4, 40, 400, 4000), but this doesnt resolve anything, so i m bit lost here, any ideas would be appreciated,guys here is my modal body:
<div id="parator_modal" class=" w3-modal">
<div class="w3-modal-content w3-animate-left w3-card-4">
<header class="w3-container w3-blue">
<span onclick="document.getElementById('parator_modal').style.display='none'"
class="w3-btn w3-red w3-round w3-display-topright" style="font-size:16px; text-shadow:2px 1px 0 #444;">×</span>
<h3 class="w3-center" style="text-shadow:2px 1px 0 #444;">Comparator</h3>
</header>
<body>
<div id="parator_modal_body">
<div class=w3-row">
<div id="map01_parator"></div>
<!--<div id=map01_parator class="w3-half w3-text-black">Map#1</div>
<div id=map02_parator class="w3-half w3-text-black">Map#2</div>-->
<div class="w3-row">
<div class="w3-half w3-center w3-text-black">
<div id="time_stamp1">Time_stamp</div>
</div>
<div class="w3-half w3-center w3-text-black">
<div id = "time_stamp2">Time_stamp</div>
</div>
</div>
</div>
</div>
</body>
<footer class="w3-container w3-light-grey">
</footer>
</div>
</div>
And my JS which loads map:
<head>
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="/[email protected]/dist/leaflet.css" >
<script src="/[email protected]/dist/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="/[email protected]/dist/esri-leaflet.js"></script>
<style>
#basemaps-wrapper {
position: absolute;
top: 10px;
right: 10px;
z-index: 900;
background: white;
padding: 10px;
}
#basemaps {
margin-bottom: 5px;
}
</style>
</head>
<script language="javascript" type="text/javascript">
// initialize the map
var mymap = L.map('map01_parator').setView([42.35, -71.08], 13);
// load a tile layer
L.tileLayer('/{z}/{x}/{y}.png',
{
attribution: 'Tiles by <a href="">MAPC</a>, Data by <a href="">MassGIS</a>',
maxZoom: 17,
minZoom: 9
}).addTo(mymap);
$('#parator_modal').on('show.w3.modal', function(){
setTimeout(function() {
mymap.invalidateSize();
}, 4000);
});
</script>
i m working on a university project, and i m quite new to JS coding and i faced an issue, i am implementing my application using w3 libraries, and there is modal window which is shown when user click on the button, and this modal contains a Leaflet map, which isnt rendering properly, so I found a solution of this problem on Stackoverflow: Leaflet map not showing properly in bootstrap 3.0 modal so i tryied the proposed solution in that thread and put this in my JS code:
$('#parator_modal').on('show.w3.modal', function(){
setTimeout(function() {
mymap.invalidateSize();
}, 400);
});
but i faced another problem which i cant find a solution to. My map still renders badly, but when i resize browser window it seems to work fine(re-renders whole map, and shows a map properly), so i thought this problem might be time related, because modal might take too long to load and map invalidateSize() is executed before modal is loaded, and i tried to use different timeouts(4, 40, 400, 4000), but this doesnt resolve anything, so i m bit lost here, any ideas would be appreciated,guys here is my modal body:
<div id="parator_modal" class=" w3-modal">
<div class="w3-modal-content w3-animate-left w3-card-4">
<header class="w3-container w3-blue">
<span onclick="document.getElementById('parator_modal').style.display='none'"
class="w3-btn w3-red w3-round w3-display-topright" style="font-size:16px; text-shadow:2px 1px 0 #444;">×</span>
<h3 class="w3-center" style="text-shadow:2px 1px 0 #444;">Comparator</h3>
</header>
<body>
<div id="parator_modal_body">
<div class=w3-row">
<div id="map01_parator"></div>
<!--<div id=map01_parator class="w3-half w3-text-black">Map#1</div>
<div id=map02_parator class="w3-half w3-text-black">Map#2</div>-->
<div class="w3-row">
<div class="w3-half w3-center w3-text-black">
<div id="time_stamp1">Time_stamp</div>
</div>
<div class="w3-half w3-center w3-text-black">
<div id = "time_stamp2">Time_stamp</div>
</div>
</div>
</div>
</div>
</body>
<footer class="w3-container w3-light-grey">
</footer>
</div>
</div>
And my JS which loads map:
<head>
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="https://unpkg./[email protected]/dist/leaflet.css" >
<script src="https://unpkg./[email protected]/dist/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg./[email protected]/dist/esri-leaflet.js"></script>
<style>
#basemaps-wrapper {
position: absolute;
top: 10px;
right: 10px;
z-index: 900;
background: white;
padding: 10px;
}
#basemaps {
margin-bottom: 5px;
}
</style>
</head>
<script language="javascript" type="text/javascript">
// initialize the map
var mymap = L.map('map01_parator').setView([42.35, -71.08], 13);
// load a tile layer
L.tileLayer('http://tiles.mapc/basemap/{z}/{x}/{y}.png',
{
attribution: 'Tiles by <a href="http://mapc">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
maxZoom: 17,
minZoom: 9
}).addTo(mymap);
$('#parator_modal').on('show.w3.modal', function(){
setTimeout(function() {
mymap.invalidateSize();
}, 4000);
});
</script>
2 Answers
Reset to default 6W3CSS is a CSS only framework, so it does not have events like bootstrap modal. You need to invalidate the map's size inside the function you are using to open the modal:
document.getElementById("mybutton").onclick = function () {
document.getElementById('mymodal').style.display = 'block';
setTimeout(function() {
mymap.invalidateSize();
}, 100);
}
in my case, It need more time to work correctly. like this:
setTimeout(function() {
mymap.invalidateSize();
}, 500);