2

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 %}

introducir la descripción de la imagen aquí

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>
2
  • 1
    Considero deberías agregar que es: map.addLayer(radioSaneamiento);
    – user128299
    Commented el 28 jun. 2020 a las 13:37
  • Es una linea dinámica en un mapa.
    – ret
    Commented el 28 jun. 2020 a las 13:42

1 respuesta 1

1

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>

4
  • Gracias Marcos. Ocurre que funciona perfecto pero únicamente con la última linea. Al colocarse las lineas (muchas) mediante un for cada vez con coordenadas diferentes. (He añadido al código para que se vea). Por algún motivo sólo le aplica a la última linea. ¿Cómo se podria aplicar a todas las lineas del mismo tipo o del mismo for?
    – ret
    Commented el 28 jun. 2020 a las 14:58
  • Perdona Marcos, en un principio no añadí todo el código, pensando que lo que se le aplicaba a una linea se le aplicaría a todas. (Por simplicar). Al no funcionar más que en la última, he pensado que el código que había puesto era insuficiente y lo he completado. Disculpa.
    – ret
    Commented el 28 jun. 2020 a las 15:26
  • @julian, he actualizado mi respuesta. Espero se entiendas y puedas aplicarlo a tu problema. Cualquier duda, avisame.
    – Marcos
    Commented el 28 jun. 2020 a las 15:28
  • Gracias Marcos. Cuando consiga meter en array, probaré y si surge algo te comento. Muy amable.
    – ret
    Commented el 28 jun. 2020 a las 15:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.