OpenLayers WFST

Tiny WFS-T client to insert (drawing/uploading), modify and delete features on GeoServers using OpenLayers. Layers with these types of geometries are supported: GeometryCollection (in this case, you can choose the geometry type of each element to draw), Point, MultiPoint, LineString, MultiLineString, Polygon and MultiPolygon.

Tested with OpenLayers version 5, 6, 7 and 8.

Usage

See Wfst Options for more details.

import Wfst, { Geoserver, WmsLayer, WfsLayer } from 'ol-wfst';
import { Fill, Stroke, Circle, Style } from 'ol/style';

// Style
import 'ol-wfst/lib/scss/ol-wfst.css';
import 'ol-wfst/lib/scss/ol-wfst.bootstrap5.css'; // Do not import if you already have boostrap css

// Optional credentials
const password = 123456;
const username = 'username';

const geoserver = {
    url: 'https://mysite.com/geoserver/myworkspace/ows',
    advanced: {
        getCapabilitiesVersion: '2.0.0',
        getFeatureVersion: '1.0.0',
        describeFeatureTypeVersion: '1.1.0',
        lockFeatureVersion: '1.1.0',
        projection: 'EPSG:3857'
    },
    // Maybe you wanna add this on a proxy, at the backend
    headers: { Authorization: 'Basic ' + btoa(username + ':' + password) }
};

const wfsLayer = new WfsLayer({
    name: 'myPointsLayer', // Name of the layer on the GeoServer
    label: 'Photos', // Optional Label to be displayed in the controller
    geoserver: geoserver,
    zIndex: 99,

    // WfsLayers need a custom style
    style: new Style({
        image: new Circle({
            radius: 7,
            fill: new Fill({
                color: '#000000'
            }),
            stroke: new Stroke({
                color: [255, 0, 0],
                width: 2
            })
        })
    }),

    // See [geoserverVendor](#geoservervendor) for more details.
    geoserverVendor: {
        cql_filter: 'id > 50',
        maxFeatures: 500
    },

    beforeTransactFeature: function (feature, transactionType) {
        if (transactionType === 'insert') {
            // Maybe add a custom value o perform an action before insert features
            feature.set('customProperty', 'customValue', true);
        } else if (transactionType === 'update') {
            // ... //
        } else if (transactionType === 'delete') {
            // .. //
        }

        return feature;
    }
});

const wmsLayer = new WmsLayer({
    name: 'myMultiGeometryLayer',
    label: 'Other elements',
    geoserver: geoserver,
    // See [geoserverVendor](#geoservervendor) for more details.
    geoserverVendor: {
        cql_filter: 'id > 50',
        buffer: 50,
        maxFeatures: 500
    },
    beforeTransactFeature: function (feature, transactionType) {
        if (transactionType === 'insert') {
            // Maybe add a custom value o perform an action before insert features
            feature.set('customProperty', 'customValue', true);
        } else if (transactionType === 'update') {
            // ... //
        } else if (transactionType === 'delete') {
            // .. //
        }

        return feature;
    }
});

const wfst = new Wfst({
    layers: [wfsLayer, wmsLayer],
    language: 'en',
    showUpload: true
});

map.addControl(wfst);

Useful methods

See [#wfsSource]

wmsLayer.setCustomParam('cql_filter', `id = 28`);
wmsLayer.setCustomParam('env', `tags=true`);

Adding features programatically

const feature = new ol.Feature({
    geometry: new ol.geom.MultiPoint([[`-57.1145}`, `-36.2855`]])
});
const inserted = await myWmsLayer.insertFeatures([feature]);

if (inserted) {
    alert('Feature inserted');
} else {
    alert('Feature not inserted');
}

Events

wfst instance events

wfst.on(
    ['modifystart', 'modifyend', 'drawstart', 'drawend', 'load', 'visible'],
    function (evt) {
        console.log(evt);
    }
);

wfst.on(['describeFeatureType'], function (evt) {
    console.log(evt.layer, evt.data);
});

Geoserver events

geoserver.on(['getCapabilities'], function (evt) {
    console.log(evt.data);
});

Layers events

WMS Layer

wmsLayer.on(['change:describeFeatureType'], function (evt) {
    console.log(evt);
});

Source TileWMS Events

wmsLayer.getSource().on([...])

WFS Layer

wfsLayer.on(['change:describeFeatureType'], function (evt) {
    console.log(evt);
});

VectorSource Events

wfsLayer.getSource().on([...])

Some considerations

If the features/vertex appear to be slightly offset after adding them, check the Number of Decimals in your Workplace, you may have to increment that to have a more accurete preview.
You can configure a Basic Authentication or an HTTP Header Proxy Authentication with this client, but in some cases is recommended setting that on an reverse proxy on the backend.
If you don't use a reverse proxy, remeber configure cors

Changelog

See CHANGELOG for details of changes in each release.

Install

Browser

JS

Load ol-wfst.js after OpenLayers. The available classes are Wfst, Wfst.Geoserver, Wfst.WfsLayer and Wfst.WmsLayer.

<script src="https://unpkg.com/ol-wfst@4.2.0"></script>

CSS

<link rel="stylesheet" href="https://unpkg.com/ol-wfst@4.2.0/dist/css/ol-wfst.min.css" />
<link rel="stylesheet" href="https://unpkg.com/ol-wfst@4.2.0/dist/css/ol-wfst.bootstrap5.min.css" />

Parcel, Webpack, etc.

NPM package: ol-wfst.

Install the package via npm

npm install ol-wfst

JS

import Wfst, { Geoserver, WmsLayer, WfsLayer } from 'ol-wfst';

CSS

// scss
import 'ol-wfst/lib/style/scss/ol-wfst.scss';
import 'ol-wfst/lib/style/scss/-ol-wfst.bootstrap5.scss';

// or css
import 'ol-wfst/lib/style/css/ol-wfst.css';
import 'ol-wfst/lib/style/css/ol-wfst.bootstrap5.css';

TypeScript type definition

TypeScript types are shipped with the project in the dist directory and should be automatically used in a TypeScript project. Interfaces are provided for Wfst Options.

API

BaseGeoserverVendor
- key
- cql_filter
- sortBy
- featureid
- filter
- format_options
- maxFeatures
- startIndex
- propertyname
Wfst
Geoserver
WfsLayer
WmsLayer
Options
- processUpload
  - Parameters
- layers
- active
- evtType
- showControl
- modal
- language
- i18n
- showUpload
- uploadFormats
LayerOptions
GeoserverOptions
- url
- advanced
- headers
- credentials
- useLockFeature
GeoServerAdvanced
WfsGeoserverVendor
- strict
WmsGeoserverVendor
- buffer
- env
- clip
- styles
- transparent
- bgcolor
- time
- sld
- sld_body
IGeoserverDescribeFeatureType
- _parsed
I18n
- labels
- errors

BaseGeoserverVendor

key

Add any other param

Wfst

Extends ol/control/Control~Control

Tiny WFST-T client to insert (drawing/uploading), modify and delete features on GeoServers using OpenLayers. Layers with these types of geometries are supported: "GeometryCollection" (in this case, you can choose the geometry type of each element to draw), "Point", "MultiPoint", "LineString", "MultiLineString", "Polygon" and "MultiPolygon".

Parameters

options Options? Wfst options, see Wfst Options for more details.

getLayers

Get all the layers in the ol-wfst instance

Returns Array<(WfsLayer | WmsLayer)>

getLayerByName

Get a layer

Parameters

layerName (optional, default '')

Returns (WfsLayer | WmsLayer)

activateDrawMode

Activate/deactivate the draw mode

Parameters

layer (WfsLayer | WmsLayer | false)

Returns void

activateEditMode

Activate/desactivate the edit mode

Parameters

bool (optional, default true)

Returns void

Geoserver

Extends ol/Object~BaseObject

Parameters

options GeoserverOptions

getCapabilities

Returns XMLDocument

getParsedCapabilities

Only work for 2.0.0 getCapabilities version

Returns any

setUrl

Parameters

url string
opt_silent (optional, default false)

Returns void

getUrl

Returns string

setHeaders

Parameters

headers HeadersInit (optional, default {})
opt_silent (optional, default false)

Returns void

getHeaders

Returns HeadersInit

setCredentials

Parameters

credentials RequestCredentials (optional, default null)
opt_silent (optional, default false)

Returns void

getCredentials

Returns RequestCredentials

setAdvanced

Parameters

advanced GeoServerAdvanced (optional, default {})
opt_silent (optional, default false)

Returns void

getAdvanced

Returns GeoServerAdvanced

hasTransaction

Returns boolean

hasLockFeature

Returns boolean

getUseLockFeature

Returns boolean

setUseLockFeature

Parameters

useLockFeature boolean
opt_silent (optional, default false)

Returns void

isLoaded

Returns boolean

getState

getAndUpdateCapabilities

Get the capabilities from the GeoServer and check all the available operations.

Returns Promise<XMLDocument>

_removeFeatures

Parameters

features Array<Feature<Geometry>>

lockFeature

Lock a feature in the geoserver. Useful before editing a geometry, to avoid changes from multiples suers

Parameters

featureId (string | number)
layerName string
retry (optional, default 0)

Returns Promise<string>

WfsLayer

Extends ol/layer/Vector~VectorLayer

Layer to retrieve WFS features from geoservers https://docs.geoserver.org/stable/en/user/services/wfs/reference.html

Parameters

options LayerOptions

refresh

setCustomParam

Use this to update Geoserver Wms Vendors (https://docs.geoserver.org/latest/en/user/services/wms/vendor.html) and other arguements (https://docs.geoserver.org/stable/en/user/services/wms/reference.html#getmap) in all the getMap requests.

Example: you can use this to change the style of the WMS, add a custom sld, set a cql_filter, etc.

Parameters

paramName string
value string Use undefined or null to remove the param (optional, default null)
refresh (optional, default true)

Returns URLSearchParams

WmsLayer

Extends ol/layer/Tile~TileLayer

Layer to retrieve WMS information from geoservers https://docs.geoserver.org/stable/en/user/services/wms/reference.html

Parameters

options LayerOptions

refresh

setCustomParam

Use this to update Geoserver Wfs Vendors (https://docs.geoserver.org/latest/en/user/services/wfs/vendor.html) and other arguements (https://docs.geoserver.org/stable/en/user/services/wfs/reference.html) in all the getFeature requests.

Example: you can use this to set a cql_filter, limit the numbers of features, etc.

Parameters

paramName string
value string (optional, default null)
refresh (optional, default true)

Returns URLSearchParams

Options

[interface] - Wfst Options specified when creating a Wfst instance

Default values:

{
 layers: null,
 evtType: 'singleclick',
 active: true,
 showControl: true,
 language: 'en',
 i18n: {...}, // according to language selection
 uploadFormats: '.geojson,.json,.kml',
 processUpload: null,
}

processUpload

Triggered to allow implement custom functions or to parse other formats than default by filtering the extension. If this doesn't return features, the default function will be used to extract them.

Parameters

file File

Returns Array<Feature<Geometry>>

layers

Layers to be loaded from the geoserver

Type: Array<(WfsLayer | WmsLayer)>

active

Init active

Type: boolean

evtType

The click event to allow selection of Features to be edited

Type: ("singleclick" | "dblclick")

showControl

Show/hide the control map

Type: boolean

Modal configuration

Type: {animateClass: string?, animateInClass: string?, transition: number?, backdropTransition: number?, templates: {dialog: (string | HTMLElement)?, headerClose: (string | HTMLElement)?}?}

language

Language to be used

Type: ("es" | "en" | "zh")

i18n

Custom translations

Type: I18n

showUpload

Show/hide the upload button

Type: boolean

uploadFormats

Accepted extension formats on upload Example: ".json,.geojson"

Type: string

LayerOptions

Extends Omit<VectorLayerOptions<any>, 'source'>

[interface] - Parameters to create the layers and connect to the GeoServer

You can use all the parameters supported by OpenLayers

Default values:

{
 name: null,
 geoserver: null,
 label: null, // `name` if not provided
 strategy: all,
 geoserverVendor: null
}

beforeTransactFeature

Triggered before inserting new features to the Geoserver. Use this to insert custom properties, modify the feature, etc.

Parameters

feature Feature<Geometry>
transaction TransactionType

Returns Feature<Geometry>

Type: RequestCredentials

useLockFeature

Use LockFeatue request on GeoServer when selecting features. Prevents a feature from being edited through a persistent feature lock. This is not always supportedd by the GeoServer. See https://docs.geoserver.org/stable/en/user/services/wfs/reference.html

Type: boolean

GeoServerAdvanced

[interface]

Default values:

{
  getCapabilitiesVersion: '2.0.0',
  getFeatureVersion: '1.0.0',
  describeFeatureTypeVersion: '1.1.0',
  lockFeatureVersion: '1.1.0',
  wfsTransactionVersion: '1.1.0',
  projection: 'EPSG:3857',
  lockFeatureParams: {
    expiry: 5,
    lockId: 'Geoserver',
    releaseAction: 'SOME'
  }
}

Type: {select: string?, addElement: string?, editElement: string?, save: string?, delete: string?, cancel: string?, apply: string?, upload: string?, editMode: string?, confirmDelete: string?, geomTypeNotSupported: string?, editFields: string?, editGeom: string?, selectDrawType: string?, uploadToLayer: string?, uploadFeatures: string?, validFeatures: string?, invalidFeatures: string?, loading: string?, toggleVisibility: string?, close: string?}

errors

Errors section

Type: {capabilities: string?, wfst: string?, layer: string?, layerNotFound: string?, layerNotVisible: string?, noValidGeometry: string?, geoserver: string?, badFormat: string?, badFile: string?, lockFeature: string?, transaction: string?, getFeatures: string?}

TODO

~~Add support to diferent layer styles~~
~~Improve widget controller: visibility toggle~~
~~Add events~~
Add Don't show again option in the error modal
Allow selection of multiples features and bulk edit
Add customizables styles
Improve scss (add variables)
Add cookies to persist widget controller state
Geometry type LinearRing support
Tests!
Improve comments and documentation
Improve interface
Change svg imports to preserve svg structure
Improve style on editing and drawing features

ol-wfst

Versions

Current Tags

Version History

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads