Creating new interactions

Creating new interactions is a little different than creating new controls. Instead of using a single root class, we can use ol.interaction.Pointer and ol.interaction.Interaction. We will cover, in this chapter, why we should use the pointer class. In this example, called ch05_pointer, we will implement two custom interactions. One for removing features and one for dragging features. Firstly, we define some CSS rules for our new controls, as usual:

.toolbar .ol-removefeat button {
    background-image: url(../../res/button_removefeat.png);
}
.toolbar .ol-dragfeat button {
    background-image: url(../../res/button_dragfeat.png);
}

Understanding ol.interaction.Pointer

Before creating some custom interaction, let's discuss how the pointer interaction works and how we can utilize it for our needs. This simple class can be constructed with five different event handler functions. The handleEvent function overrides every other handler and allows us to freely decide what...