Mastering OpenLayers 3

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, ...