CODEWITHSUNDEEP
javascriptcheckboxopenlayers-3
ryansstack
ryansstack

Reputation: 1476

Openlayers 3 A checkbox bound to a Vector layer for visibility is not doing anything

I'm trying to bind a checkbox to a vector layer for the 'visible' property and it's not working; easy points to whoever spots my typo :)

The thing is, this works for ol.layer.Tile, but not ol.layer.Vector, and only the visible checkbox doesn't work. 'opacity' works fine.

var list = document.getElementById('some-ul-element')
....

var li = document.createElement('li');
var checkbox = document.createElement('input');
checkbox.setAttribute('type','checkbox');
checkbox.setAttribute('checked',true);
li.appendChild(checkbox);
var label = document.createElement('label');
label.appendChild(document.createTextNode(layer.get("title")));
li.appendChild(label);
var range = document.createElement('input');
range.setAttribute('type','range');
range.setAttribute('min','0');
range.setAttribute('max','1');            
range.setAttribute('step','0.01');
range.setAttribute('value','1');
li.appendChild(range);

new ol.dom.Input(range).bindTo('value',layer,'opacity');
new ol.dom.Input(checkbox).bindTo('checked',layer,'visible');

....
list.appendChild(li)

Upvotes: 0

Views: 1565

Answers (3)

ryansstack
ryansstack

Reputation: 1476

The issue was, the map I was using was declared with this option:

new ol.Map({ 
    ....
    renderer: ['dom','canvas','webgl'],
    ....
    });

This totally disabled 'setVisible', I couldn't even use 'layer.setVisible(false)' successfully.

Removing the entire "renderer" key value pair from the ol.Map options at instantiation fixed this issue.

Upvotes: 0

jacmendt
jacmendt

Reputation: 476

Did you had a look on this stackoverflow issue https://gis.stackexchange.com/questions/138364/layer-doesnt-turn-back-on-after-clicking-in-openlayers-3/139346#139346 There are also some alternative solutions to using the ol.dom.Input element.

Upvotes: 1

fredj
fredj

Reputation: 143

Works for me on http://openlayers.org/en/master/examples/bind-input.html?mode=raw

var checkbox = document.createElement('input');
checkbox.setAttribute('type','checkbox');
new ol.dom.Input(checkbox).bindTo('checked',layer,'visible');

document.body.appendChild(checkbox);

Upvotes: 1

Related Questions