ol-wfst

Tiny WFST-T client to insert (drawing or uploading), modify and delete features on GeoServers using OpenLayers.

Usage no npm install needed!

<script type="module">
  import olWfst from 'https://cdn.skypack.dev/ol-wfst';
</script>

README

OpenLayers WFST

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.

Tested with OpenLayers version 5 and 6.

Drawing Editing fields

Usage

See Wfst Options for more details.

import Wfst 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 wfst = new Wfst({
    geoServerUrl: 'https://mysite.com/geoserver/myworkspace/ows',
    geoServerAdvanced: {
        getCapabilitiesVersion: '1.3.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) },
    layers: [
        {
            name: 'myPointsLayer', // Name of the layer on the GeoServer
            label: 'Photos', // Optional Label to be displayed in the controller
            mode: 'wfs',
            zIndex: 99,
            style: new Style({
                image: new Circle({
                    radius: 7,
                    fill: new Fill({
                        color: '#000000'
                    }),
                    stroke: new Stroke({
                        color: [255, 0, 0],
                        width: 2
                    })
                })
            })
        },
        {
            name: 'myMultiGeometryLayer',
            label: 'Other elements'
        },
        {
            name: 'myLineStringLayer',
            label: 'Routes',
            visible: false
        }
    ],
    language: 'en',
    minZoom: 12,
    showUpload: true,
    beforeInsertFeature: function (feature) {
        // Add a custom value o perform an action before insert features
        feature.set('customProperty', 'customValue', true);
        return feature;
    }
});

// Events
wfst.on(['getCapabilities', 'getFeaturesLoaded'], function (evt) {
    console.log(evt.type, evt.data);
});

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

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

map.addControl(wfst);

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. Wfst is available as Wfst.

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

CSS

<link rel="stylesheet" href="https://unpkg.com/ol-wfst@3.0.0/dist/css/ol-wfst.min.css" />
<link rel="stylesheet" href="https://unpkg.com/ol-wfst@3.0.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 from 'ol-wfst';

CSS

// scss
import 'ol-wfst/dist/scss/ol-wfst.scss';
import 'ol-wfst/dist/scss/-ol-wfst.bootstrap5.scss';

// or css
import 'ol-wfst/dist/css/ol-wfst.css';
import 'ol-wfst/dist/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

Table of Contents

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

activateDrawMode

Activate/deactivate the draw mode

Parameters

Returns void

activateEditMode

Activate/desactivate the edit mode

Parameters
  • bool (optional, default true)

Returns void

insertFeaturesTo

Add features directly to the geoserver, in a custom layer without checking geometry or showing modal to confirm.

Parameters

Returns void

Options

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

Default values:

{
 geoServerUrl: null,
 geoServerAdvanced: {
     getCapabilitiesVersion: '1.3.0',
     getFeatureVersion: '1.0.0',
     describeFeatureTypeVersion: '1.1.0',
     lockFeatureVersion: '1.1.0',
     wfsTransactionVersion: '1.1.0',
     projection: 'EPSG:3857'
 },
 headers: {},
 layers: null,
 evtType: 'singleclick',
 active: true,
 showControl: true,
 useLockFeature: true,
 minZoom: 9,
 language: 'en',
 i18n: {...}, // according to language selection
 uploadFormats: '.geojson,.json,.kml',
 processUpload: null,
 beforeInsertFeature: null,
}

geoServerUrl

Url for OWS services. This endpoint will recive the WFS, WFST and WMS requests

Type: string

geoServerAdvanced

Advanced options for geoserver requests

Type: {getCapabilitiesVersion: string?, getFeatureVersion: string?, lockFeatureVersion: string?, describeFeatureTypeVersion: string?, wfsTransactionVersion: string?, projection: ProjectionLike?}

headers

Url headers for GeoServer requests. You can use it to add Authorization credentials

Type: HeadersInit

layers

Layers to be loaded from the geoserver

Type: Array<LayerParams>

active

Init active

Type: boolean

evtType

The click event to allow selection of Features to be edited

Type: ("singleclick" | "dblclick")

useLockFeature

Use LockFeatue request on GeoServer when selecting features. This is not always supportedd by the GeoServer. See https://docs.geoserver.org/stable/en/user/services/wfs/reference.html

Type: boolean

showControl

Show/hide the control map

Type: boolean

minZoom

Zoom level to hide features to prevent too much features being loaded

Type: number

modal

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

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

beforeInsertFeature

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

Parameters
  • feature Feature<Geometry>

Returns Feature<Geometry>

LayerParams

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,
 label: null, // `name` if not provided
 mode: 'wfs',
 wfsStrategy: 'bbox',
 cqlFilter: null,
 tilesBuffer: 0,
}

name

Layer name in the GeoServer

Type: string

label

Label to be displayed in the widget control

Type: string

mode

Mode to use in the layer

Type: ("wfs" | "wms")

wfsStrategy

Strategy function for loading features. Only works if mode is "wfs"

Type: string

cqlFilter

The cql_filter GeoServer parameter is similar to the standard filter parameter, but the filter is expressed using ECQL (Extended Common Query Language). ECQL provides a more compact and readable syntax compared to OGC XML filters. For full details see the ECQL Reference and CQL and ECQL tutorial.

Type: string

tilesBuffer

The buffer parameter specifies the number of additional border pixels that are used on requesting rasted tiles Only works if mode is 'wms'

Type: number

I18n

[interface] - Custom Language specified when creating a WFST instance

labels

Labels section

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?, 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 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

License

MIT (c) Gastón Zalba.