Building a set of feature selection controls

Interactions in OpenLayers 3 are related to the view or vector layers. These interactions related to vector data mostly have only this in common. Their working mechanism is highly inconsistent, it depends on the type of the given interaction. This peculiarity requires us to customize every interaction individually for our needs. In this example, called ch05_select_complex, we will create three selection tools.

Styling the controls

Firstly, we create some styles for the control buttons. We will use some nice background images to describe the controls. As we leave the text content of the buttons empty, we have to vertically center the buttons, not just the container div element. We also need to set some rules for the background images to render them properly:

.toolbar .ol-control button {
[…]
    vertical-align: middle;
    background-size: 1em;
    background-repeat: no-repeat;
    background-position: 50%;
}
[…]
.toolbar .ol-singleselect button ...