this is the my Map ,my removeLayer in leaflet map remove once (remove Picture ) and as you see in picture it remove marker perfectly but when i try to remove it again it don't! check is not true but it didnt remove for 2nd time. here is the function that called from checkbox :
function myFunction(id) {
var marker = [];
var checkBox = document.getElementById(id)
var lat = checkBox.name;
var lon = checkBox.value;
var RN = checkBox.className;
console.log(RN)
var pop_cont = `<img id="icon" src="sample.jpg" alt="shipPIC"/><br><b>${RN}</b><br> latitude :${lat}<br>longitude: ${lon}`
if (checkBox.checked == true) {
marker = L.marker([lat, lon]).addTo(map);
marker.setIcon(dish_icon);
marker.bindPopup(pop_cont).openPopup();
console.log("checked")
} else {
marker = L.marker([lat, lon])
var x_id = L.stamp(markers);
map.removeLayer(markers[id]);
console.log("NOOOOT Check");
}
}
thank you very much!
You check if the checkbox checked. It means that you have programmaticly check and uncheck the checkbox. Like that. I commented out the leaflet part.
function myFunction(id) {
console.log(id)
var marker = [];
var checkBox = document.getElementById(id)
var lat = checkBox.name;
var lon = checkBox.value;
var RN = checkBox.className;
console.log(RN)
var pop_cont = `<img id="icon" src="sample.jpg" alt="shipPIC"/><br><b>${RN}</b><br> latitude :${lat}<br>longitude: ${lon}`
if (checkBox.checked == true) {
//marker = L.marker([lat, lon]).addTo(map);
//marker.setIcon(dish_icon);
//marker.bindPopup(pop_cont).openPopup();
console.log("checked")
checkBox.checked = false;
} else {
//marker = L.marker([lat, lon])
//var x_id = L.stamp(markers);
//map.removeLayer(markers[id]);
console.log("NOOOOT Check");
checkBox.checked = true;
}
}<button onclick="myFunction('vehicle1')">klick</button>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">