Among the three WFS Transaction APIs, let's cover Update, which modifies data.

Using the WFS Transaction protocol, you can modify spatial data from a variety of environments capable of making API calls, such as the web or an app, rather than a database.

The processing flow in this document is as follows.

1. Click the edit button inside the Overlay that appears when you click an object.
2. Modify the Polygon into the desired shape.
   1. This document only covers the Polygon shape.
3. Enter the data to be modified.
4. Modify the data via WFS Transaction Update.

TXT
POST https://example.com/geoserver/wfs

XML
<wfs:Transaction
	xmlns:wfs="http://www.opengis.net/wfs"
	xmlns:gml="http://www.opengis.net/gml"
	xmlns:ogc="http://www.opengis.net/ogc"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	service="WFS"
	version="1.0.0"
	xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-transaction.xsd">
	<wfs:Update typeName="layer_name">
		<wfs:Property>
			<wfs:Name>column1</wfs:Name>
			<wfs:Value>value1</wfs:Value>
		</wfs:Property>

		<wfs:Property>
			<wfs:Name>column2</wfs:Name>
			<wfs:Value>value2</wfs:Value>
		</wfs:Property>

		<wfs:Property>
			<wfs:Name>geo_column</wfs:Name>
			<wfs:Value>
				<gml:Polygon srsName="EPSG:0000">
					<gml:outerBoundaryIs>
						<gml:LinearRing>
							<gml:coordinates>x1,y1 x2,y2 x3,y3 x4,y4 x1,y1</gml:coordinates>
						</gml:LinearRing>
					</gml:outerBoundaryIs>
				</gml:Polygon>
			</wfs:Value>
		</wfs:Property>

		<ogc:Filter>
			<ogc:FeatureId fid="layer_name.32" />
		</ogc:Filter>
	</wfs:Update>
</wfs:Transaction>

All API calls up to now have been made via GET, but every WFS Transaction request is made via POST. You can declare the data to add by entering the above XML format in the request body.

• The target table is layer_name.
  • Specified via the typeName property of the wfs:Update tag.
• Each column's data is represented individually by a wfs:Property tag.
  • The child tag wfs:Name represents the column's name.
  • The child tag wfs:Value represents the value to update the column to.
• Conditions are specified with the ogc:Filter tag, following the OGC Filter spec.

The meaning of the XML is as above. You need to draw a shape directly on the map, then generate the XML by inputting the shape's coordinate values and the data to insert.

The XML above includes Polygon data; if you're curious about the XML for other data types, refer to Chapter 8.

We use a standard WFS map. If the Draw object is for drawing shapes, the Modify object is a feature that lets you manipulate an already-drawn shape.

Simply put, you can think of it as a way to just change the appearance of a shape.

Snap is a feature that makes the mouse pointer easily snap onto an object.

TYPESCRIPT
import Snap from 'ol/interaction/Snap';
import Modify from 'ol/interaction/Modify';

const snap = new Snap({
	source: wfsLayer
});

const modify = new Modify({
	source: wfsLayer
});

Both Snap and Modify take a Source object as their main option. Each feature only operates on that Source's data.

You can enable the feature with the map.addInteraction() method. Conversely, to disable the drawing feature, you need to remove the Modify object with map.removeInteraction().

The Snap object can simply be assigned to the Map object at all times without any issue.

TYPESCRIPT
document.onkeyup = (e) =>
{
	// When ESC is pressed
	if (e.key.toLowerCase() === 'escape')
	{
		map.removeInteraction(modify);
	}
};

document.oncontextmenu = () =>
{
	map.removeInteraction(modify);
};

These disable the Modify feature when the ESC key is pressed and when the right mouse button is pressed, respectively.

In this document, once the Modify feature finishes, we display a data entry form. Once entry is complete, the WFS Transaction API is called.

You can check an example implementing this at OpenLayers6 Sandbox - WFS Transaction Update.