Layer selection visibility unchecked in initial state in OpenLayers 3

Question

I have this JSFiddle example that has two vector layers in it, 'Cities Layer 1' and 'Cities Layer 2'. As you can see from this example, cities layer 1 has a visibility set as the default of true and cities layer 2 has the visibility changed to false so it doesn't bring it in on load. This all works fine.

However, my question is that on load, I would like my glyphicon to be unchecked to show the user that the layer hasn't loaded. I'm guessing I could add some form of 'if' to the visible parameter of the layer in the last section of the JavaScript section?

Answer 1

When you're building the layer tree you need to check the layer.getVisible() value and assign the correct eye icon. See the example below:

http://jsfiddle.net/arcf7k77/2/

Alternatively, you could use something like knockout or angular to support the binding.

Further to your comment, in order to persist the eye icon state recursively, you would need to apply an each() function, noting the state of the parent layer node:

http://jsfiddle.net/pamnt00b/

There's probably room for improvement, but that should get you started.