I am attempting to remove a layer (I am using a self made UI with a dropdown menu here!)
When I attempt to have a layer removed using this code: setTimeout(function() {map.removeLayer(mapid); }); I do not get an error but it does nothing. I can see in the console that the value is populated properly.
If I replace the mapid here with one of the map names like: setTimeout(function() {map.removeLayer(basicmap); }); it will remove this layer. I am trying to find a better way to do this than add 35 remove options!
Anyone have any ideas or suggestion as to what would be preventing the layer from removing?
var mapselect = "basicmap";
var mapid = "basicmap";
function scheduleA(event) {
mapselect = this.value;
console.log("map value: " + mapselect);
//Remove Everything
console.log("map id: " + mapid);
setTimeout(function() {map.removeLayer(mapid); });
if (mapselect == "basicmap") {
setTimeout(function() {basicmap.addTo(map); });
console.log('option 0');
}
//change the map id to be hard coded here and go back to option 1,2,3,4,5,etc
if (mapselect == "outpost1") {
setTimeout(function() {outpost1.addTo(map); });
console.log('option 1');
}
if (mapselect == "recoverymap") {
setTimeout(function() {recoverymap.addTo(map); });
console.log('option 2');
}
if (mapselect == "reconmap") {
setTimeout(function() {reconmap.addTo(map); });
console.log('option 3');
}
if (mapselect == "exmap") {
setTimeout(function() {exmap.addTo(map); });
console.log('option 4');
}
console.log(mapselect);
mapid = mapselect;
}
For reference here is the HTML code calling the function:
<label for="Map">Choose a Mission:</label>
<select name="Map" id="Map" onchange="scheduleA.call(this, event)">
<option value="basicmap" selected></option>
<option value="outpost1">Map 1</option>
<option value="recoverymap">Map 2</option>
<option value="reconmap">Map 3</option>
<option value="exmap">Map 4</option>
</select><br><br>
Your problem is the setTimeout it will force that map.removeLayer(mapid); is called at the end of your function scheduleA. Before the timeout is executed you overwrite the mapid with the new selected map. So when the remove is called you remove the new added layer -> which results that it looks like nothing happend (but it added the new one and removed it again)
I don't know why you use setTimeout, you can remove it, it is nowhere needed
If for some reason you must keep your setTimeout's, simply reverse the way you are handling your current and new values of mapid, by having instead the previous and "new current" values:
const previousMapid = mapid;
// Remove the previous
setTimeout(() => map.removeLayer(previousMapid));
// Now you can safely re-assign mapid
mapid = this.value;