Modifying features

As we saw in the previous recipe, Drawing features across multiple vector layers, it's quite straightforward to enable drawing capabilities for the user. However, what if the user needs to edit drawn features? Perhaps they want to move some vertexes around or move the entire feature to a new place. We'll take a look at these types of modifications throughout this recipe.

OpenLayers provides the ol.interaction.Modify class to move or add vertexes and the ol.interaction.Translate class to move whole features about.

The source code can be found in ch05/ch05-modifying-features, and here's a screenshot of what this will look like when it's done:

How to do it…

Learn how to modify existing features by following these steps:

1. Create an HTML file with the OpenLayers dependencies and div to hold the map.

2. Create a custom JavaScript file and begin by instantiating map with view, a raster tile layer, and a vector layer that retrieves features from a local GeoJSON file:

   var map = new ol.Map...