Mastering OpenLayers 3

Building a measuring control

We have come to our last example in this chapter. In this example, called ch05_measure, we will harness the full power of interactions and build a completely custom one in which we manually handle every event type. This example has three parts, so stay sharp. Firstly, as usual, we create a CSS rule for our new control button:

.toolbar .ol-measure button {
    background-image: url(../../res/button_measure.png);
}

One button is enough for this control, as we will implement two functionalities (length and area measurement) into a single interaction.

Creating the interaction

In the interaction's constructor, we accept two properties in an object literal: a reference to our map object and an optional style object or style function. ...