Learn how to modify existing features by following these steps:

As you can see, adding this rich type of capability is made easy with OpenLayers. Once a user has selected a feature from the map, they can edit the feature or move it around. To spice things up a bit, we've added a filter mechanism to the select interaction, which checks a layer property and the geometry type before allowing the feature to be selected. Let's take a closer look at what's going on within the JavaScript:

new ol.layer.Vector({
  editable: true,
  source: new ol.source.Vector({
    url: 'features.geojson',
    format: new ol.format.GeoJSON({
      defaultDataProjection: 'EPSG:3857'
    })
  })
})

Within this instantiation of map, we set up a vector layer with a custom property of editable, which is used to identify whether or not this layer can be edited. We have also pulled in some GeoJSON that will populate the layer with some premade features.

var select = new ol.interaction.Select({
  filter: function(feature, layer) {
    return layer.get('editable') &&
      /Polygon|LineString/.test(
        feature.getGeometry().getType()
      );
  },
  condition: ol.events.condition.click
});

The select interaction has been configured with a filtering function. The function assigned to the filter property must be of type ol.interaction.SelectFilterFunction. This type of function is passed the feature and the layer as arguments, respectively, and it must return either true or false. If true is returned, the feature is eligible for selection and, thus, it is added to the collection. If false is returned, the feature will not be selected and it won't be added to the collection.

Our custom filtering function retrieves the layer property of editable via the get method and checks to see whether it evaluates to true. If so, a second conditional check is performed on the type of geometry.

The geometry object is retrieved from feature via the getGeometry method. Once we have the geometry, there's a method available to us called getType, which returns the geometry type as a string, for example, Polygon. This result is passed into the JavaScript test method, which runs the result against a regular expression. The /Polygon|LineString/ regular expression matches a string of either Polygon or LineString (the geometry type). The pipe (|) within this particular regular expression symbolizes an OR logical condition.

If both the layer is set as editable and the feature is of one of the accepted types, then the return statement evaluates to true; otherwise, this will be false.

In other words, if a vector layer hasn't been specifically marked as editable, then the feature cannot be modified. It also doesn't allow any other geometry types other than the two that were just discussed to be selected, and, subsequently, edited. This demonstrates how you can begin to structure read only or read/write layers, depending on your application requirements.

The condition property has been set to ol.events.condition.click to avoid the 250 ms delay that you get when accepting the default ol.events.condition.singleClick value for this property.

map.addInteraction(new ol.interaction.Modify({
  features: select.getFeatures()
}));
map.addInteraction(new ol.interaction.Translate({
  features: select.getFeatures()
}));

The modify and translate interactions follow the same setup. The features property of each are passed the currently selected features from the select interaction via select.getFeatures().

Although we didn't utilize any events within this recipe, the modify interaction publishes the self-explanatory modifyend and modifystart events. The translate interaction publishes similar events, namely translateend and translatestart, but it also publishes a translating event to subscribe to movement in between.

When modifying features in OpenLayers 2, you were also able to effortlessly rotate and resize them. At the time of writing, this functionality hasn't been directly ported across to version 3.

However, there's an interesting function called applyTransform from the ol.geom.SimpleGeometry base class, which is inherited by most of the geometry types, such as ol.geom.Polygon. This function can be used to manually transform each coordinate of the geometry in order to modify the feature in place.

The function is of type ol.TransformFunction, which is passed the current array of coordinates and must return the output array of coordinates to be used. There's nothing to stop you performing some creative transforming here to imitate some missing functionality that you've become accustomed to in OpenLayers 2. This is, however, an advanced discussion, and unfortunately, it won't be covered in this book.