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);
}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',
...