Up to now, all we've done is call data through GeoServer and display it. Whether displaying it as objects, drawing it as an image, or presenting the data directly, in the end it was all just about showing data in some form.

This document, along with the next two, covers inserting/updating/deleting spatial data. Using the WFS Transaction protocol, you can perform CUD operations on data following a fixed pattern.

This document specifically covers WFS Transaction Insert — that is, adding spatial data.

Using the WFS Transaction protocol, you can add 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 add button.
2. Draw a Polygon in the desired shape.
   1. This document only covers the Polygon shape.
3. Enter the data to be inserted.
4. Add the data via WFS Transaction Insert.

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: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:Insert>
		<layer_name>
			<column1>value1</column1>
			<column2>value2</column2>
			<column3>value3</column3>
			<geo_column>
				<gml:Polygon srsName="EPSG:4326">
					<gml:outerBoundaryIs>
						<gml:LinearRing>
							<gml:coordinates>x1,y1 x2,y2 x3,y3 x4,y4 x1,y1</gml:coordinates>
						</gml:LinearRing>
					</gml:outerBoundaryIs>
				</gml:Polygon>
			</geo_column>
		</layer_name>
	</wfs:Insert>
</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.
• Insert value1, value2, value3 into columns column1, column2, column3, respectively.
  • If a column exists in the schema but isn't specified during insertion, it's inserted as null.
• The spatial column name is geo_column.
• It's a polygon with the coordinates x1,y1 x2,y2 x3,y3 x4,y4 x1,y1.
  • The coordinate system is EPSG:4326.

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. Let's add a Draw object to draw a Polygon on the map.

TYPESCRIPT
import { Map } from 'ol';
import Draw from 'ol/interaction/Draw';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';

const drawSource = new VectorSource();

const drawLayer = new VectorLayer({
	source: drawSource,
	properties: { name: 'draw' }
});

const drawInteraction = new Draw({
	source: drawLayer.getSource(),
	type: 'Polygon'
});

new Map({
	...
	layers: [ ..., drawLayer ]
});

1. Create an empty VectorSource.
   1. The object being drawn is created in that VectorSource.
2. Create a VectorLayer with the VectorSource.
   1. You can also make use of an existing VectorLayer.
3. Create a Draw object with the VectorSource.
   1. You can specify the desired data format via the type value.

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

In other words, if you add Draw to the Map and don't remove it, the drawing feature stays continuously enabled, causing an issue where you can't properly interact with the map. So you need to remove the Draw object from the Map at an appropriate point after drawing.

Alternatively, you can control it via the Draw object's setActive() method. Passing a boolean parameter specifies whether it's active.

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

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

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

The Draw object also supports events.

TYPESCRIPT
// Drawing start event
drawInteraction.on('drawstart', () => {});

// Drawing end event
drawInteraction.on('drawend', () => {});

// Drawing abort event
drawInteraction.on('drawabort', () => {});

• drawstart - When drawing starts
• drawend - When drawing ends (the shape is drawn normally)
• drawabort - When drawing is cancelled (similar to redrawing)

In this document, once drawing 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 Insert.