Cómo hacer que al activar checkbox se vea el elemento javascript y cuando se deschekee que se deje de ver. No funciona tal cual tengo.
Elemento a visualizar o no visualizar según checkbox:
map.addLayer(radioSaneamiento);
RadioSaneamiento es una linea discontinua dinámica en el mapa tipo leaflet:
{% 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 %}
Botón:
<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>
map.addLayer(radioSaneamiento);