Por el momento para que:
- "SI se vea" tenes que agregarlo al mapa (
polyline.addTo()
) - "NO se vea" tenes que sacarlo del mapa (
polyline.removeFrom()
)
Ambos métodos son heredados de Layer
Ejemplo:
var map = L.map('map').setView([45.51, -122.68], 13);
var arregloRadios = []; // arreglo donde guardamos TODOS los polyline
//
var latlngs = [
[45.51, -122.68],
[37.77, -122.43],
[34.04, -118.2]
];
var radioSaneamiento = L.polyline(latlngs, {
color: "#fe8d22",
opacity: "0.4",
dashArray: "10,30",
dashSpeed: -30
});
arregloRadios.push(radioSaneamiento); // Agregamos el polyline al arreglo
//
document.getElementById('defaultCheck1').addEventListener('click', function() {
radioSaneamiento[this // Recorremos el arreglo para mostrar/ocultar los polyline
arregloRadios.forEach(e => e[this.checked ? 'addTo' : 'removeFrom'](map))
});
html,
body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<div id='map'></div>
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label text-white" for="defaultCheck1">
Activar
</label>