How to make the javascript element be seen when the checkbox is activated and when it is unchecked it is no longer seen. It doesn't work as it is.
Element to display or not display according to checkbox:
map.addLayer(radioSaneamiento);
RadioSaneamiento is a dynamic dashed line on the leaflet map:
{% for station in stations0 %}
var var1="{{ station.latitud }}";
var var2="{{ station.longitud }}";
var var3="{{ station.punto_comunicacion.latitud }}";
var var4="{{ station.punto_comunicacion.longitud }}";
if(var4){
latlngs = [];
latlngs.push(new L.LatLng(var1,var2));
latlngs.push(new L.LatLng(var3,var4));
var radioSaneamiento = L.polyline(latlngs, { //Javascript
color: "#fe8d22",
opacity: "0.4",
dashArray: "10,30",
dashSpeed: -30
}
document.getElementById('radioSaneamiento').addEventListener('click', function() {
radioSaneamiento[this.checked ? 'addTo' : 'removeFrom'](map)
});
map.fitBounds(L.latLngBounds(latlngs));
map.addLayer(radioSaneamiento);
}
{% endfor %}
Button:
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label text-white" for="defaultCheck1">
Activar
</label>
JavaScript:
<script>
function check() {
document.getElementById("defaultCheck1").checked = true;
map.addLayer(radioSaneamiento);
}
</script>
At the moment so that:
polyline.addTo()
)polyline.removeFrom()
)Both methods are inherited from
Layer
Example: