Skip to main content
se añadieron 249 caracteres en el cuerpo
Origen Enlace
Marcos
  • 35.7k
  • 7
  • 36
  • 70

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>

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 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
});

document.getElementById('defaultCheck1').addEventListener('click', function() {
  radioSaneamiento[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>

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() {
   // 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>

Origen Enlace
Marcos
  • 35.7k
  • 7
  • 36
  • 70

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 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
});

document.getElementById('defaultCheck1').addEventListener('click', function() {
  radioSaneamiento[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>