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.
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. As interactions do not have the exposed setMap
and getMap
methods, we need a reference to our map; thus, if it is not there, we return an error. If the style is not defined, we simply assign a default style, which is a simplified version of...