One of the features on my website is a modal window that pops up whenever a user selects a layer from a menu. The user can close this modal window by using the "X" icon or clicking on the map itself. However, there is an issue where if the user unchecks the layer from the menu, the modal will reappear.
I am seeking assistance in modifying the code so that the modal does not pop up again when the user unchecks the layer from the menu.
For reference, I am utilizing Leaflet for the map and Bootstrap for the modal.
Below is an example of the hypothetical code:
HTML for the modal:
<div id="myRouteModal">blah blah</div>
HTML for the custom layers menu:
<label><input id="myRoute" type="checkbox" class="check">My Route</label>
JS for custom menu control:
var overlaysMenuCtrl = L.Control.extend({ ... blah blah... });
map.addControl(new overlaysMenuCtrl)());
JavaScript:
function toggleLayer(checked, layer){
if(checked){
map.addLayer(layer);
} else {
map.removeLayer(layer);
}
}
$(".check").change(function(){
var layerClicked = $(this).attr("id");
//Turn layers on and off based on the ID of the radio checked
switch(layerClicked){
case "myRoute": toggleLayer(this.checked, myRoute);
$('myRouteModal').modal(modalOptions);
break;
...and other layers ...
}
});