Modifying and snapping to features

In this example, called ch05_modify, we will customize the remaining feature editing interactions before we go on and create our own. Firstly, we create some further CSS rules for our new controls:

.toolbar .ol-modifyfeat button {
    background-image: url(../../res/button_modifyfeat.png);
}
.toolbar .ol-snap button {
    background-image: url(../../res/button_snap.png);
}

Extending the method

Now that we have the required rules, we can extend our addEditingToolBar method with two additional interactions. As both the modify and the snap interactions accept a collection of features to work with, we go that way and store the selected layer's features in a new collection object:

toolBar.prototype.addEditingToolBar = function () {
    […]
    this.activeFeatures = new ol.Collection();
    var modifyFeature = new ol.control.Interaction({
        label: ' ',
        tipLabel: 'Modify features',
        className: 'ol-modifyfeat ol-unselectable ol-control',
     ...