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í][1]][1]

**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>


  [1]: https://i.sstatic.net/vtBCJ.png