You successfully used the bindTo() method to establish the layer as an observer of the checkbox using the ol.dom.Input helper class. We bound the visible property of our layer to the checked property of the ol.dom.Input. When the checkbox is clicked, ol.dom.Input updates the checked property and notifies observers of the checked property that it has changed. Because we bound the visible property of the layer to the checked property of the input, the layer is notified of the change and updates the visible property, which causes the layer to turn on and off.

Property binding works both ways. You can manually change the visibility of the layer using the Console in Web Inspector. Try the following and observe what happens to the checkbox:

layer.setVisible(false);
layer.setVisible(true);

You should see the checkbox change state as if you had clicked it.

Sometimes, the property value that you are sharing between two objects is not exactly what you need. For instance, you might want to synchronize two maps so that they are looking at the same center point, but at different resolutions. If we share a view between the maps, we can't have one of them at a different resolution. We could use two views and use events to manually synchronize them—and this is a perfectly valid approach—but wouldn't it be nice if we could use bindTo and just modify the resolution value a little bit? This is exactly what the object returned from bindTo allows us to do. The return value from bindTo is an object with a single function, transform, that you can invoke with two functions as arguments. The first function is used to transform the value going from the source to the target and the second is used to transform the value going to the source from the target. For instance:

var transformer = view1.bindTo(resolution', view2);
var from = function(value) {
  return value * 2;
};
var to = function(value) {
  return value / 2;
};
transformer.transform(from, to);

This example binds the resolution property of view2 (the target) to the resolution property of view1 (the source). We can capture the return value in the variable transformer, create two functions that will transform the resolution value, and call the transformer variable's transform function with our two functions. The result is that view2 parameter's resolution property will be bound to view1 parameter's property but will always have a value twice that of view1.

Most classes in the OpenLayers library have one or more KVO properties (these are specified in the library documentation) and have some special features. As we saw, the name of the property can be used as the key parameter in any of the KVO methods described earlier. Additionally, three events are triggered when the value of a property changes.

The first event is beforepropertychange and is triggered before a property will change. It provides the name of the property that will change to the listener:

layer.on('beforepropertychange', function(event) {
 console.log('layer changed in some way');
 // event.type == 'beforepropertychange'
 // event.key == '<the key that is changing>'
});

The second event is propertychange is triggered as (effectively after) the property is changed:

layer.on('propertychange', function(event) {
 console.log('layer changed in some way');
 // event.type == 'propertychange'
 // event.key == '<the key that has changed>'
});

A third event is a change event specific to the property that changed. The name of the event is derived from the property name with the prefix change:. This means that we can be notified of changes to individual properties. In our previous example of binding a layer's visibility to a checkbox, we can register to be notified of the change like this:

layer.on('change:visible', function(event) {
 console.log('layer visibility changed');
 // event.type == 'change:visible'
 // event.target == layer
});

It may seem like there are a lot of events that happen in response to a KVO property changing and you are right, there are! Each event, though, is slightly different and provides both convenient and optimal ways of responding to changes that happen to objects in OpenLayers.

In addition to events, KVO properties also have special accessor functions called setters and getters defined for them. This means that instead of using the KVO methods get(key) and set(key, value), you can use get<Property>() and set<Property>(value), where <Property> is the capitalized property name. For instance:

layer.get('visible');
layer.getVisible();
layer.set('visible', true);
layer.setVisible(true);

These methods are primarily for convenience and you can use either depending on your own preferences.