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