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?


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

  • I forgot about that. If you are just dealing with pure JavaScript, this is probably the best way to go. – Stacy Bowler Mar 18 '15 at 18:22
  • This is I think the best way. I am trying to dynamically add checkboxes to a page after loading new layers, and bind them like this, however I am having a problem with the bindings on Vector layers, in case you run into something similar stackoverflow.com/questions/29240516/… – ryansstack Mar 27 '15 at 16:25

I would suggest using a variable to pass to the setVisible function in your onclick instead of hard coding it. You can initialize it when the page loads. Then you would simply just do this onClick="vector_summer.setVisible(!summerVisible); summerVisible = !summerVisible;" .

If you are using angular you could hook up the model of the variable to the checkbox and that would make things a bit easier. It would also be a bit cleaner to pull the onClick into a javascript function instead, but hopefully you get the idea.


Another way to do it could be like this:

<section id="map"></section>
<input type="checkbox" onClick="toggleLayer(this)" name="osm" checked>OSM</input><br>
<input type="checkbox" onClick="toggleLayer(this)" name="mapquest" checked>MapQuest</input>

<!-- javascript code -->
var map = new ol.Map({
    'layers': [
        new ol.layer.Tile({
            style: 'Road',
            source: new ol.source.MapQuest({layer: 'osm'}),
            name: 'mapquest'
        new ol.layer.Tile({
            source: new ol.source.OSM(),
            name: 'osm'
    'renderer': 'canvas',
    'target': 'map',
    'view': new ol.View({
        'projection': 'EPSG:3857',
        'center': [1531627.8847864927, 6632124.286850829],
        'zoom': 4

var toggleLayer = function(inputEl){
        if (layer.get('name') === inputEl.name)

Important is, that in this examlple the checkbox should have the same name as the layers. Hope it helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.