<body>
<script>
function mapin() {
var map1 = L.map('map').setView([0,0],1);
L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=RM234QFDXeTVS0G8RUEl',
{attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">©
MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',}).addTo(map1);
var markar = L.marker([51.5, -0.09]).addTo(map1);
}
function myFunction() {
if(vehicle1.checked == 1){
document.getElementById("map").style.display="block";
mapin();
}
else{
document.getElementById("map").innerHTML = ""
}
if(vehicle2.checked == 1){
document.getElementById("map2").innerHTML = "Option 2 checked"
}
else{
document.getElementById("map2").innerHTML = ""
}
if(vehicle3.checked == 1){
document.getElementById("text3").innerHTML = "Option 3 checked"
}
else{
document.getElementById("text3").innerHTML = ""
}
}
</script>
<div >
<div id="map"></div>
<div id="map2"></div>
<div><p id="text3"></p></div>
</div>
<div >
<div >This is top<br>
<input type="checkbox" id="vehicle1" name="option1" value="1" onclick="myFunction()">
<label for="vehicle1"> this is option 1</label><br>
<input type="checkbox" id="vehicle2" name="option2" value="2" onclick="myFunction()">
<label for="vehicle2"> this is option 2</label><br>
<input type="checkbox" id="vehicle3" name="option3" value="3" onclick="myFunction()">
<label for="vehicle3"> this is option 3</label><br>
</div>
</div>
</body>
Here I am displaying/hiding different text using different checkboxes.
If I want to do the same thing for maps, how will I do so?
Hiding and showing different maps on checking and unchecking different checkboxes.
CodePudding user response:
You can instantiate as many maps as you like, even if they are currently hidden with style.display = "none"
. But make sure to call the invalidateSize()
method once they are revealed.
Avoid "hiding" them by flushing the map container innerHTML
. You would have to re-instantiate the map every time you reveal it. Just changing the display style to "none"
should be enough.