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:
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
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
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
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.
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.