Mapping interactions to controls

In this example, called ch05_select, we fill the gap between interactions and controls, and create a simple feature selecting the control. As we need to inform the user about the control's status, we create some CSS rules for active controls. Activated controls will have a nice orange color, which won't change, if we hover over them. We also extend the ol-unselectable class to our controls:

.layertree,.toolbar .ol-unselectable {
[…]
.toolbar .ol-control button.active {
    background-color: rgba(234,129,8,1);
}
.toolbar .ol-control button.active:hover {
    background-color: rgba(234,129,8,1);
}

Creating the control

Next, we can go on and build a custom control that has only one job: managing the underlying interaction. Firstly, we set up the control's properties and GUI elements based on the supplied options:

ol.control.Interaction = function (opt_options) {
    var options = opt_options || {};
    var controlDiv = document.createElement('div');
    controlDiv...