Stay Connected with the Boundless Blog

OpenLayers 3 Editing With WFS-T

OpenLayers Logo

We’ve talked about building applications with OpenLayers 3 before, but mostly focused on how to display maps. OpenLayers 3 includes all the building blocks needed to create an editing application as well, such as support for feature editing (insert, update and delete) and writing back the changes to the server through a transactional Web Feature Service (WFS-T).

The OpenLayers vector-wfs example demonstrates how to use a vector layer with a BBOX strategy served up by a WFS such as GeoServer, so make sure to look at (the source of) this example before reading this post if you are not familiar with it already.

The parts of OpenLayers 3 that we need to support feature editing through WFS-T are:

  • ol.interaction.Draw
  • ol.interaction.Modify
  • ol.format.WFS


Let’s start with the case of inserting a new feature. Make sure to configure the Draw interaction with the correct geometry type (config option named type) and the correct geometryName. Also have it point to the vector layer’s source through the source config option. The Draw interaction fires an event called drawend when the user finishes drawing. We can use this event to create a WFS transaction and send it to the WFS server. In order to do this we’ll create an ol.format.WFS instance and call its writeTransaction method. Since we only have a single feature to insert, we’ll pass in an array of that single feature as the first argument, and null for the updates and deletes arguments. For the options argument we need to pass in:

  • gmlOptions: an object with an srsName property which uses the map’s view projection
  • featureNS: the URI of the featureType we are using in the application
  • featureType: the name of the featureType

To find out the value of featureNS, you can use a WFS DescribeFeatureType request. The writeTransaction method gives us back a node which we can then serialise to a string using the browser’s XMLSerializer object. Use jQuery ajax or the browser’s built-in XMLHttpRequest to send the string to the WFS server using HTTP POST. When the result comes back, we parse this again with ol.format.WFS‘s readTransaction method and we can obtain the feature id given to the feature by the WFS server and can then set this on the feature using its setId method.


For updating the geometry of an existing feature, we use ol.interaction.Modify and we’ll use it in conjunction with an ol.interaction.Select instance. So users will first select a feature by clicking, and can then modify it. When we create the Modify interaction, we pass in the feature collection of the Select interaction. We will store a hash of modified features, which we can then use to determine if we need to send a WFS Update Transaction. We will listen for the add and remove events of the Select interaction’s feature collection. In the listener for the add event, we will listen for the change event on the feature, and once change is fired, we’ll add an entry to the modified features hash based on the feature’s id. In the listener for the remove event (which fires when the feature gets unselected), we will check if the feature is in the modified hash, and if it is, we’ll use ol.format.WFS again to write out the Transaction XML (now only passing an array of a single feature as the updates argument) and send it to the WFS server. When the result comes back, we can parse it by using the method readTransactionResponse from ol.format.WFS. We can then check to see if totalUpdates is set to 1 which gives us an indication that our transaction was processed successfully by the WFS server.


For deleting a feature, we use the select interaction. If a feature is selected, and the user presses the Delete button, we’ll use ol.format.WFS again to write out the Transaction XML, but only passing in an array of a single feature to the deletes argument. We will then again transform this into a string and send it to the WFS using AJAX.

Boundless SDK

While this whole process may sound pretty cumbersome,  the upcoming OpenGeo Suite 4.1 release we will make your life a lot easier by shipping the Boundless SDK with some OpenLayers 3 templates to facilitate creating an editing application based on OpenLayers 3. So stay tuned.

OL3 Editing App

Bart van den Eijnden

Software Engineer

Bart works on OpenLayers 3 and GeoExt. Bart has a strong interest in the standards of the Open Geospatial Consortium (OGC). Bart is also part of the project steering committee (PSC) of GeoExt and OpenLayers.