[GIS] Layer doesn’t turn back on after clicking in OpenLayers 3

openlayers

I have the following code. I have setup a default function of turning the showing all my layers and on click the layers disappear. But they don't turn back on when I click on them.
So what have I done wrong here?

 <input type="checkbox" onClick="vector_summer.setVisible(false);"  id="ch_summer" name="summer" checked>Summer 
 <input type="checkbox" onClick="vector_winter.setVisible(false);"  id="ch_winter" name="winter" checked>Winter 
 <input type="checkbox" onClick="vector_relay_route.setVisible(false);"  id="ch_SLC2002" name="SLC2002" checked>Salt Lake City 2002
 <input type="checkbox" onClick="slc_2002_torch.setVisible(false);"  id="ch_none" name="none" checked>Torch

Then this is how I am calling the layers later on:

var map = new ol.Map({
layers: [rasterLayer, us_states_vec, slc_2002_torch, vector_summer,
vector_winter,vector_relay_route],
overlays: [overlay],
target: 'map',
view: new ol.View({
center: ol.proj.transform([34.59, 31.59], 'EPSG:4326', 'EPSG:3857'),
zoom: 2
})
});
vector_summer.setVisible(true);
vector_winter.setVisible(true);
vector_relay_route.setVisible(true);
us_states_vec.setVisible(true);
slc_2002_torch.setVisible(true);

What do I do so that the layers get turned back after I uncheck them?

Best Answer

Openlayers provide a way to bind an html element to a layer property :

var visible = new ol.dom.Input(document.getElementById('visible')); visible.bindTo('checked', layer, 'visible');

See this in action in this example

Related Question