Modify Features in OpenLayers

To get full source code for this tutorial, click here.

To check the live demo for this tutorial, click here.

OpenLayers provide lot of interactions to interact with your web map. One such interaction is Modify interaction which is defined using ol.interaction.Modify module. Using this interaction, you can modify existing vector features. In order to implement this functionality, we will divide it into two steps.

1. Select feature you want to modify using select interaction
2. Modify the selected feature using Modify interaction

To modify an existing feature, first you have to select it.

OpenLayers Dynamic Style

See more

To select any feature in OpenLayers, we will use Select interaction which can be defined using ol.interaction.Select module. See line number 64 in code snippet below. If you see there, we are using two properties layers and style. layers property specify the vector layers on which select interaction will work. style property will apply style on selected features.

Once we have selected an existing feature, we will use Modify interaction to modify it. At line number 72, we are creating a Modify interaction. Modify interaction uses features property. To this features property, we will assign features that are selected using Select interaction. Basically, this property is telling that Modify interaction can modify only these selected features.

I hope this tutorial will create a good foundation for you. If you want tutorials on another GIS topic or you have any queries, please send an email at contact@spatial-dev.guru

To get full source code for this tutorial, click here.

To check the live demo for this tutorial, click here.