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.
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
opt_options
Options? Wfst options, see Wfst Options for more details.
activateDrawMode
Activate/deactivate the draw mode
Parameters
Returns void
activateEditMode
Activate/desactivate the edit mode
Parameters
bool
(optional, defaulttrue
)
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.