ol-wfst 3.0.1 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,478 +1,478 @@
1
- # OpenLayers WFST
2
-
3
- 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_.
4
-
5
- Tested with OpenLayers version 5 and 6.
6
-
7
- <img src="screenshots/example-1.jpg" alt="Drawing" style="width:50%; float:left;">
8
- <img src="screenshots/example-2.jpg" alt="Editing fields" style="width:50%; float:left;">
9
-
10
- ## Usage
11
-
12
- See [Wfst Options](#options) for more details.
13
-
14
- ```javascript
15
- import 'Wfst' from 'ol-wfst';
16
- import { Fill, Stroke, Circle, Style } from 'ol/style';
17
-
18
- // Style
19
- import 'ol-wfst/lib/scss/ol-wfst.css';
20
- import 'ol-wfst/lib/scss/ol-wfst.bootstrap5.css'; // Do not import if you already have boostrap css
21
-
22
- // Optional credentials
23
- const password = 123456;
24
- const username = 'username';
25
-
26
- const wfst = new Wfst({
27
- geoServerUrl: 'https://mysite.com/geoserver/myworkspace/ows',
28
- geoServerAdvanced: {
29
- getCapabilitiesVersion: '1.3.0',
30
- getFeatureVersion: '1.0.0',
31
- describeFeatureTypeVersion: '1.1.0',
32
- lockFeatureVersion: '1.1.0',
33
- projection: 'EPSG:3857'
34
- },
35
- // Maybe you wanna add this on a proxy, at the backend
36
- headers: { Authorization: 'Basic ' + btoa(username + ':' + password) },
37
- layers: [
38
- {
39
- name: 'myPointsLayer', // Name of the layer on the GeoServer
40
- label: 'Photos', // Optional Label to be displayed in the controller
41
- mode: 'wfs',
42
- zIndex: 99,
43
- style: new Style({
44
- image: new Circle({
45
- radius: 7,
46
- fill: new Fill({
47
- color: '#000000'
48
- }),
49
- stroke: new Stroke({
50
- color: [255, 0, 0],
51
- width: 2
52
- })
53
- })
54
- })
55
- },
56
- {
57
- name: 'myMultiGeometryLayer',
58
- label: 'Other elements'
59
- },
60
- {
61
- name: 'myLineStringLayer',
62
- label: 'Routes',
63
- visible: false
64
- }
65
- ],
66
- language: 'en',
67
- minZoom: 12,
68
- showUpload: true,
69
- beforeInsertFeature: function (feature) {
70
- // Add a custom value o perform an action before insert features
71
- feature.set('customProperty', 'customValue', true);
72
- return feature;
73
- }
74
- });
75
-
76
- // Events
77
- wfst.on(['getCapabilities', 'getFeaturesLoaded'], function (evt) {
78
- console.log(evt.type, evt.data);
79
- });
80
-
81
- wfst.on(['describeFeatureType', 'getFeature'], function (evt) {
82
- console.log(evt.type, evt.layer, evt.data);
83
- });
84
-
85
- wfst.on(['modifystart', 'modifyend', 'drawstart', 'drawend'], function (evt) {
86
- console.log(evt.type, evt);
87
- });
88
-
89
- map.addControl(wfst);
90
-
91
- ```
92
-
93
- ### Some considerations
94
-
95
- - 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.
96
- - 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.
97
- - If you don't use a reverse proxy, remeber configure [cors](https://docs.geoserver.org/latest/en/user/production/container.html#enable-cors)
98
-
99
- ## Changelog
100
-
101
- See [CHANGELOG](./CHANGELOG.md) for details of changes in each release.
102
-
103
- ## Install
104
-
105
- ### Browser
106
-
107
- #### JS
108
-
109
- Load `ol-wfst.js` after OpenLayers. Wfst is available as `Wfst`.
110
-
111
- ```HTML
112
- <script src="https://unpkg.com/ol-wfst@3.0.0"></script>
113
- ```
114
-
115
- #### CSS
116
-
117
- ```HTML
118
- <link rel="stylesheet" href="https://unpkg.com/ol-wfst@3.0.0/dist/css/ol-wfst.min.css" />
119
- <link rel="stylesheet" href="https://unpkg.com/ol-wfst@3.0.0/dist/css/ol-wfst.bootstrap5.min.css" />
120
- ```
121
-
122
- ### Parcel, Webpack, etc.
123
-
124
- NPM package: [ol-wfst](https://www.npmjs.com/package/ol-wfst).
125
-
126
- Install the package via `npm`
127
-
128
- npm install ol-wfst
129
-
130
- #### JS
131
-
132
- ```js
133
- import Wfst from 'ol-wfst';
134
- ```
135
-
136
- #### CSS
137
-
138
- ```js
139
- // scss
140
- import 'ol-wfst/dist/scss/ol-wfst.scss';
141
- import 'ol-wfst/dist/scss/-ol-wfst.bootstrap5.scss';
142
-
143
- // or css
144
- import 'ol-wfst/dist/css/ol-wfst.css';
145
- import 'ol-wfst/dist/css/ol-wfst.bootstrap5.css';
146
- ```
147
-
148
- ##### TypeScript type definition
149
-
150
- 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.
151
-
152
- ## API
153
-
154
- <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
155
-
156
- #### Table of Contents
157
-
158
- - [Wfst](#wfst)
159
- - [Parameters](#parameters)
160
- - [activateDrawMode](#activatedrawmode)
161
- - [Parameters](#parameters-1)
162
- - [activateEditMode](#activateeditmode)
163
- - [Parameters](#parameters-2)
164
- - [insertFeaturesTo](#insertfeaturesto)
165
- - [Parameters](#parameters-3)
166
- - [Options](#options)
167
- - [geoServerUrl](#geoserverurl)
168
- - [geoServerAdvanced](#geoserveradvanced)
169
- - [headers](#headers)
170
- - [layers](#layers)
171
- - [active](#active)
172
- - [evtType](#evttype)
173
- - [useLockFeature](#uselockfeature)
174
- - [showControl](#showcontrol)
175
- - [minZoom](#minzoom)
176
- - [modal](#modal)
177
- - [language](#language)
178
- - [i18n](#i18n)
179
- - [showUpload](#showupload)
180
- - [uploadFormats](#uploadformats)
181
- - [processUpload](#processupload)
182
- - [Parameters](#parameters-4)
183
- - [beforeInsertFeature](#beforeinsertfeature)
184
- - [Parameters](#parameters-5)
185
- - [LayerParams](#layerparams)
186
- - [name](#name)
187
- - [label](#label)
188
- - [mode](#mode)
189
- - [wfsStrategy](#wfsstrategy)
190
- - [cqlFilter](#cqlfilter)
191
- - [tilesBuffer](#tilesbuffer)
192
- - [I18n](#i18n-1)
193
- - [labels](#labels)
194
- - [errors](#errors)
195
-
196
- ### Wfst
197
-
198
- **Extends ol/control/Control~Control**
199
-
200
- Tiny WFST-T client to insert (drawing/uploading), modify and delete
201
- features on GeoServers using OpenLayers. Layers with these types
202
- of geometries are supported: "GeometryCollection" (in this case, you can
203
- choose the geometry type of each element to draw), "Point", "MultiPoint",
204
- "LineString", "MultiLineString", "Polygon" and "MultiPolygon".
205
-
206
- #### Parameters
207
-
208
- - `opt_options` **[Options](#options)?** Wfst options, see [Wfst Options](#options) for more details.
209
-
210
- #### activateDrawMode
211
-
212
- Activate/deactivate the draw mode
213
-
214
- ##### Parameters
215
-
216
- - `layerName` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean))**
217
-
218
- Returns **void**
219
-
220
- #### activateEditMode
221
-
222
- Activate/desactivate the edit mode
223
-
224
- ##### Parameters
225
-
226
- - `bool` (optional, default `true`)
227
-
228
- Returns **void**
229
-
230
- #### insertFeaturesTo
231
-
232
- Add features directly to the geoserver, in a custom layer
233
- without checking geometry or showing modal to confirm.
234
-
235
- ##### Parameters
236
-
237
- - `layerName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**
238
- - `features` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)\<Feature\<Geometry>>**
239
-
240
- Returns **void**
241
-
242
- ### Options
243
-
244
- **_\[interface]_** - Wfst Options specified when creating a Wfst instance
245
-
246
- Default values:
247
-
248
- ```javascript
249
- {
250
- geoServerUrl: null,
251
- geoServerAdvanced: {
252
- getCapabilitiesVersion: '1.3.0',
253
- getFeatureVersion: '1.0.0',
254
- describeFeatureTypeVersion: '1.1.0',
255
- lockFeatureVersion: '1.1.0',
256
- wfsTransactionVersion: '1.1.0',
257
- projection: 'EPSG:3857'
258
- },
259
- headers: {},
260
- layers: null,
261
- evtType: 'singleclick',
262
- active: true,
263
- showControl: true,
264
- useLockFeature: true,
265
- minZoom: 9,
266
- language: 'en',
267
- i18n: {...}, // according to language selection
268
- uploadFormats: '.geojson,.json,.kml',
269
- processUpload: null,
270
- beforeInsertFeature: null,
271
- }
272
- ```
273
-
274
- #### geoServerUrl
275
-
276
- Url for OWS services. This endpoint will recive the WFS, WFST and WMS requests
277
-
278
- Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
279
-
280
- #### geoServerAdvanced
281
-
282
- Advanced options for geoserver requests
283
-
284
- Type: {getCapabilitiesVersion: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, getFeatureVersion: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, lockFeatureVersion: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, describeFeatureTypeVersion: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, wfsTransactionVersion: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, projection: ProjectionLike?}
285
-
286
- #### headers
287
-
288
- Url headers for GeoServer requests. You can use it to add Authorization credentials
289
-
290
- Type: HeadersInit
291
-
292
- #### layers
293
-
294
- Layers to be loaded from the geoserver
295
-
296
- Type: [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[LayerParams](#layerparams)>
297
-
298
- #### active
299
-
300
- Init active
301
-
302
- Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
303
-
304
- #### evtType
305
-
306
- The click event to allow selection of Features to be edited
307
-
308
- Type: (`"singleclick"` | `"dblclick"`)
309
-
310
- #### useLockFeature
311
-
312
- Use LockFeatue request on GeoServer when selecting features.
313
- This is not always supportedd by the GeoServer.
314
- See <https://docs.geoserver.org/stable/en/user/services/wfs/reference.html>
315
-
316
- Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
317
-
318
- #### showControl
319
-
320
- Show/hide the control map
321
-
322
- Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
323
-
324
- #### minZoom
325
-
326
- Zoom level to hide features to prevent too much features being loaded
327
-
328
- Type: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
329
-
330
- #### modal
331
-
332
- Modal configuration
333
-
334
- Type: {animateClass: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, animateInClass: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, transition: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)?, backdropTransition: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)?, templates: {dialog: ([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | [HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element))?, headerClose: ([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | [HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element))?}?}
335
-
336
- #### language
337
-
338
- Language to be used
339
-
340
- Type: (`"es"` | `"en"`)
341
-
342
- #### i18n
343
-
344
- Custom translations
345
-
346
- Type: [I18n](#i18n)
347
-
348
- #### showUpload
349
-
350
- Show/hide the upload button
351
-
352
- Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
353
-
354
- #### uploadFormats
355
-
356
- Accepted extension formats on upload
357
- Example: ".json,.geojson"
358
-
359
- Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
360
-
361
- #### processUpload
362
-
363
- Triggered to allow implement custom functions or to parse other formats than default
364
- by filtering the extension. If this doesn't return features, the default function
365
- will be used to extract them.
366
-
367
- ##### Parameters
368
-
369
- - `file` **File**
370
-
371
- Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)\<Feature\<Geometry>>**
372
-
373
- #### beforeInsertFeature
374
-
375
- Triggered before inserting new features to the Geoserver.
376
- Use this to insert custom properties, modify the feature, etc.
377
-
378
- ##### Parameters
379
-
380
- - `feature` **Feature\<Geometry>**
381
-
382
- Returns **Feature\<Geometry>**
383
-
384
- ### LayerParams
385
-
386
- **Extends Omit\<[VectorLayerOptions](https://openlayers.org/en/latest/apidoc/module-ol_layer_Vector-VectorLayer.html)\<any>, 'source'>**
387
-
388
- **_\[interface]_** - Parameters to create the layers and connect to the GeoServer
389
-
390
- You can use all the parameters supported by OpenLayers
391
-
392
- Default values:
393
-
394
- ```javascript
395
- {
396
- name: null,
397
- label: null, // `name` if not provided
398
- mode: 'wfs',
399
- wfsStrategy: 'bbox',
400
- cqlFilter: null,
401
- tilesBuffer: 0,
402
- }
403
- ```
404
-
405
- #### name
406
-
407
- Layer name in the GeoServer
408
-
409
- Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
410
-
411
- #### label
412
-
413
- Label to be displayed in the widget control
414
-
415
- Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
416
-
417
- #### mode
418
-
419
- Mode to use in the layer
420
-
421
- Type: (`"wfs"` | `"wms"`)
422
-
423
- #### wfsStrategy
424
-
425
- Strategy function for loading features. Only works if mode is "wfs"
426
-
427
- Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
428
-
429
- #### cqlFilter
430
-
431
- The cql_filter GeoServer parameter is similar to the standard filter parameter,
432
- but the filter is expressed using ECQL (Extended Common Query Language).
433
- ECQL provides a more compact and readable syntax compared to OGC XML filters.
434
- For full details see the [ECQL Reference](https://docs.geoserver.org/stable/en/user/filter/ecql_reference.html#filter-ecql-reference) and CQL and ECQL tutorial.
435
-
436
- Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
437
-
438
- #### tilesBuffer
439
-
440
- The buffer parameter specifies the number of additional
441
- border pixels that are used on requesting rasted tiles
442
- Only works if mode is 'wms'
443
-
444
- Type: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
445
-
446
- ### I18n
447
-
448
- **_\[interface]_** - Custom Language specified when creating a WFST instance
449
-
450
- #### labels
451
-
452
- Labels section
453
-
454
- Type: {select: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, addElement: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, editElement: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, save: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, delete: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, cancel: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, apply: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, upload: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, editMode: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, confirmDelete: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, geomTypeNotSupported: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, editFields: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, editGeom: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, selectDrawType: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, uploadToLayer: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, uploadFeatures: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, validFeatures: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, invalidFeatures: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, loading: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, toggleVisibility: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, close: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?}
455
-
456
- #### errors
457
-
458
- Errors section
459
-
460
- Type: {capabilities: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, wfst: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, layer: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, noValidGeometry: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, geoserver: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, badFormat: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, badFile: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, lockFeature: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, transaction: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, getFeatures: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?}
461
-
462
- ## TODO
463
-
464
- - \~~Add support to diferent layer styles~~
465
- - \~~Improve widget controller: visibility toggle~~
466
- - \~~Add events~~
467
- - Add customizables styles
468
- - Improve scss (add variables)
469
- - Add cookies to persist widget controller state
470
- - Geometry type _LinearRing_ support
471
- - Tests!
472
- - Improve comments and documentation
473
- - Improve interface
474
- - Change svg imports to preserve svg structure
475
-
476
- ## License
477
-
478
- MIT (c) Gastón Zalba.
1
+ # OpenLayers WFST
2
+
3
+ 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_.
4
+
5
+ Tested with OpenLayers version 5 and 6.
6
+
7
+ <img src="screenshots/example-1.jpg" alt="Drawing" style="width:50%; float:left;">
8
+ <img src="screenshots/example-2.jpg" alt="Editing fields" style="width:50%; float:left;">
9
+
10
+ ## Usage
11
+
12
+ See [Wfst Options](#options) for more details.
13
+
14
+ ```javascript
15
+ import Wfst from 'ol-wfst';
16
+ import { Fill, Stroke, Circle, Style } from 'ol/style';
17
+
18
+ // Style
19
+ import 'ol-wfst/lib/scss/ol-wfst.css';
20
+ import 'ol-wfst/lib/scss/ol-wfst.bootstrap5.css'; // Do not import if you already have boostrap css
21
+
22
+ // Optional credentials
23
+ const password = 123456;
24
+ const username = 'username';
25
+
26
+ const wfst = new Wfst({
27
+ geoServerUrl: 'https://mysite.com/geoserver/myworkspace/ows',
28
+ geoServerAdvanced: {
29
+ getCapabilitiesVersion: '1.3.0',
30
+ getFeatureVersion: '1.0.0',
31
+ describeFeatureTypeVersion: '1.1.0',
32
+ lockFeatureVersion: '1.1.0',
33
+ projection: 'EPSG:3857'
34
+ },
35
+ // Maybe you wanna add this on a proxy, at the backend
36
+ headers: { Authorization: 'Basic ' + btoa(username + ':' + password) },
37
+ layers: [
38
+ {
39
+ name: 'myPointsLayer', // Name of the layer on the GeoServer
40
+ label: 'Photos', // Optional Label to be displayed in the controller
41
+ mode: 'wfs',
42
+ zIndex: 99,
43
+ style: new Style({
44
+ image: new Circle({
45
+ radius: 7,
46
+ fill: new Fill({
47
+ color: '#000000'
48
+ }),
49
+ stroke: new Stroke({
50
+ color: [255, 0, 0],
51
+ width: 2
52
+ })
53
+ })
54
+ })
55
+ },
56
+ {
57
+ name: 'myMultiGeometryLayer',
58
+ label: 'Other elements'
59
+ },
60
+ {
61
+ name: 'myLineStringLayer',
62
+ label: 'Routes',
63
+ visible: false
64
+ }
65
+ ],
66
+ language: 'en',
67
+ minZoom: 12,
68
+ showUpload: true,
69
+ beforeInsertFeature: function (feature) {
70
+ // Add a custom value o perform an action before insert features
71
+ feature.set('customProperty', 'customValue', true);
72
+ return feature;
73
+ }
74
+ });
75
+
76
+ // Events
77
+ wfst.on(['getCapabilities', 'getFeaturesLoaded'], function (evt) {
78
+ console.log(evt.type, evt.data);
79
+ });
80
+
81
+ wfst.on(['describeFeatureType', 'getFeature'], function (evt) {
82
+ console.log(evt.type, evt.layer, evt.data);
83
+ });
84
+
85
+ wfst.on(['modifystart', 'modifyend', 'drawstart', 'drawend'], function (evt) {
86
+ console.log(evt.type, evt);
87
+ });
88
+
89
+ map.addControl(wfst);
90
+
91
+ ```
92
+
93
+ ### Some considerations
94
+
95
+ - 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.
96
+ - 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.
97
+ - If you don't use a reverse proxy, remeber configure [cors](https://docs.geoserver.org/latest/en/user/production/container.html#enable-cors)
98
+
99
+ ## Changelog
100
+
101
+ See [CHANGELOG](./CHANGELOG.md) for details of changes in each release.
102
+
103
+ ## Install
104
+
105
+ ### Browser
106
+
107
+ #### JS
108
+
109
+ Load `ol-wfst.js` after OpenLayers. Wfst is available as `Wfst`.
110
+
111
+ ```HTML
112
+ <script src="https://unpkg.com/ol-wfst@3.0.0"></script>
113
+ ```
114
+
115
+ #### CSS
116
+
117
+ ```HTML
118
+ <link rel="stylesheet" href="https://unpkg.com/ol-wfst@3.0.0/dist/css/ol-wfst.min.css" />
119
+ <link rel="stylesheet" href="https://unpkg.com/ol-wfst@3.0.0/dist/css/ol-wfst.bootstrap5.min.css" />
120
+ ```
121
+
122
+ ### Parcel, Webpack, etc.
123
+
124
+ NPM package: [ol-wfst](https://www.npmjs.com/package/ol-wfst).
125
+
126
+ Install the package via `npm`
127
+
128
+ npm install ol-wfst
129
+
130
+ #### JS
131
+
132
+ ```js
133
+ import Wfst from 'ol-wfst';
134
+ ```
135
+
136
+ #### CSS
137
+
138
+ ```js
139
+ // scss
140
+ import 'ol-wfst/dist/scss/ol-wfst.scss';
141
+ import 'ol-wfst/dist/scss/-ol-wfst.bootstrap5.scss';
142
+
143
+ // or css
144
+ import 'ol-wfst/dist/css/ol-wfst.css';
145
+ import 'ol-wfst/dist/css/ol-wfst.bootstrap5.css';
146
+ ```
147
+
148
+ ##### TypeScript type definition
149
+
150
+ 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.
151
+
152
+ ## API
153
+
154
+ <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
155
+
156
+ #### Table of Contents
157
+
158
+ - [Wfst](#wfst)
159
+ - [Parameters](#parameters)
160
+ - [activateDrawMode](#activatedrawmode)
161
+ - [Parameters](#parameters-1)
162
+ - [activateEditMode](#activateeditmode)
163
+ - [Parameters](#parameters-2)
164
+ - [insertFeaturesTo](#insertfeaturesto)
165
+ - [Parameters](#parameters-3)
166
+ - [Options](#options)
167
+ - [geoServerUrl](#geoserverurl)
168
+ - [geoServerAdvanced](#geoserveradvanced)
169
+ - [headers](#headers)
170
+ - [layers](#layers)
171
+ - [active](#active)
172
+ - [evtType](#evttype)
173
+ - [useLockFeature](#uselockfeature)
174
+ - [showControl](#showcontrol)
175
+ - [minZoom](#minzoom)
176
+ - [modal](#modal)
177
+ - [language](#language)
178
+ - [i18n](#i18n)
179
+ - [showUpload](#showupload)
180
+ - [uploadFormats](#uploadformats)
181
+ - [processUpload](#processupload)
182
+ - [Parameters](#parameters-4)
183
+ - [beforeInsertFeature](#beforeinsertfeature)
184
+ - [Parameters](#parameters-5)
185
+ - [LayerParams](#layerparams)
186
+ - [name](#name)
187
+ - [label](#label)
188
+ - [mode](#mode)
189
+ - [wfsStrategy](#wfsstrategy)
190
+ - [cqlFilter](#cqlfilter)
191
+ - [tilesBuffer](#tilesbuffer)
192
+ - [I18n](#i18n-1)
193
+ - [labels](#labels)
194
+ - [errors](#errors)
195
+
196
+ ### Wfst
197
+
198
+ **Extends ol/control/Control~Control**
199
+
200
+ Tiny WFST-T client to insert (drawing/uploading), modify and delete
201
+ features on GeoServers using OpenLayers. Layers with these types
202
+ of geometries are supported: "GeometryCollection" (in this case, you can
203
+ choose the geometry type of each element to draw), "Point", "MultiPoint",
204
+ "LineString", "MultiLineString", "Polygon" and "MultiPolygon".
205
+
206
+ #### Parameters
207
+
208
+ - `opt_options` **[Options](#options)?** Wfst options, see [Wfst Options](#options) for more details.
209
+
210
+ #### activateDrawMode
211
+
212
+ Activate/deactivate the draw mode
213
+
214
+ ##### Parameters
215
+
216
+ - `layerName` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean))**
217
+
218
+ Returns **void**
219
+
220
+ #### activateEditMode
221
+
222
+ Activate/desactivate the edit mode
223
+
224
+ ##### Parameters
225
+
226
+ - `bool` (optional, default `true`)
227
+
228
+ Returns **void**
229
+
230
+ #### insertFeaturesTo
231
+
232
+ Add features directly to the geoserver, in a custom layer
233
+ without checking geometry or showing modal to confirm.
234
+
235
+ ##### Parameters
236
+
237
+ - `layerName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**
238
+ - `features` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)\<Feature\<Geometry>>**
239
+
240
+ Returns **void**
241
+
242
+ ### Options
243
+
244
+ **_\[interface]_** - Wfst Options specified when creating a Wfst instance
245
+
246
+ Default values:
247
+
248
+ ```javascript
249
+ {
250
+ geoServerUrl: null,
251
+ geoServerAdvanced: {
252
+ getCapabilitiesVersion: '1.3.0',
253
+ getFeatureVersion: '1.0.0',
254
+ describeFeatureTypeVersion: '1.1.0',
255
+ lockFeatureVersion: '1.1.0',
256
+ wfsTransactionVersion: '1.1.0',
257
+ projection: 'EPSG:3857'
258
+ },
259
+ headers: {},
260
+ layers: null,
261
+ evtType: 'singleclick',
262
+ active: true,
263
+ showControl: true,
264
+ useLockFeature: true,
265
+ minZoom: 9,
266
+ language: 'en',
267
+ i18n: {...}, // according to language selection
268
+ uploadFormats: '.geojson,.json,.kml',
269
+ processUpload: null,
270
+ beforeInsertFeature: null,
271
+ }
272
+ ```
273
+
274
+ #### geoServerUrl
275
+
276
+ Url for OWS services. This endpoint will recive the WFS, WFST and WMS requests
277
+
278
+ Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
279
+
280
+ #### geoServerAdvanced
281
+
282
+ Advanced options for geoserver requests
283
+
284
+ Type: {getCapabilitiesVersion: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, getFeatureVersion: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, lockFeatureVersion: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, describeFeatureTypeVersion: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, wfsTransactionVersion: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, projection: ProjectionLike?}
285
+
286
+ #### headers
287
+
288
+ Url headers for GeoServer requests. You can use it to add Authorization credentials
289
+
290
+ Type: HeadersInit
291
+
292
+ #### layers
293
+
294
+ Layers to be loaded from the geoserver
295
+
296
+ Type: [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[LayerParams](#layerparams)>
297
+
298
+ #### active
299
+
300
+ Init active
301
+
302
+ Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
303
+
304
+ #### evtType
305
+
306
+ The click event to allow selection of Features to be edited
307
+
308
+ Type: (`"singleclick"` | `"dblclick"`)
309
+
310
+ #### useLockFeature
311
+
312
+ Use LockFeatue request on GeoServer when selecting features.
313
+ This is not always supportedd by the GeoServer.
314
+ See <https://docs.geoserver.org/stable/en/user/services/wfs/reference.html>
315
+
316
+ Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
317
+
318
+ #### showControl
319
+
320
+ Show/hide the control map
321
+
322
+ Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
323
+
324
+ #### minZoom
325
+
326
+ Zoom level to hide features to prevent too much features being loaded
327
+
328
+ Type: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
329
+
330
+ #### modal
331
+
332
+ Modal configuration
333
+
334
+ Type: {animateClass: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, animateInClass: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, transition: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)?, backdropTransition: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)?, templates: {dialog: ([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | [HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element))?, headerClose: ([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | [HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element))?}?}
335
+
336
+ #### language
337
+
338
+ Language to be used
339
+
340
+ Type: (`"es"` | `"en"` | `"zh"`)
341
+
342
+ #### i18n
343
+
344
+ Custom translations
345
+
346
+ Type: [I18n](#i18n)
347
+
348
+ #### showUpload
349
+
350
+ Show/hide the upload button
351
+
352
+ Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
353
+
354
+ #### uploadFormats
355
+
356
+ Accepted extension formats on upload
357
+ Example: ".json,.geojson"
358
+
359
+ Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
360
+
361
+ #### processUpload
362
+
363
+ Triggered to allow implement custom functions or to parse other formats than default
364
+ by filtering the extension. If this doesn't return features, the default function
365
+ will be used to extract them.
366
+
367
+ ##### Parameters
368
+
369
+ - `file` **File**
370
+
371
+ Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)\<Feature\<Geometry>>**
372
+
373
+ #### beforeInsertFeature
374
+
375
+ Triggered before inserting new features to the Geoserver.
376
+ Use this to insert custom properties, modify the feature, etc.
377
+
378
+ ##### Parameters
379
+
380
+ - `feature` **Feature\<Geometry>**
381
+
382
+ Returns **Feature\<Geometry>**
383
+
384
+ ### LayerParams
385
+
386
+ **Extends Omit\<[VectorLayerOptions](https://openlayers.org/en/latest/apidoc/module-ol_layer_Vector-VectorLayer.html)\<any>, 'source'>**
387
+
388
+ **_\[interface]_** - Parameters to create the layers and connect to the GeoServer
389
+
390
+ You can use all the parameters supported by OpenLayers
391
+
392
+ Default values:
393
+
394
+ ```javascript
395
+ {
396
+ name: null,
397
+ label: null, // `name` if not provided
398
+ mode: 'wfs',
399
+ wfsStrategy: 'bbox',
400
+ cqlFilter: null,
401
+ tilesBuffer: 0,
402
+ }
403
+ ```
404
+
405
+ #### name
406
+
407
+ Layer name in the GeoServer
408
+
409
+ Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
410
+
411
+ #### label
412
+
413
+ Label to be displayed in the widget control
414
+
415
+ Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
416
+
417
+ #### mode
418
+
419
+ Mode to use in the layer
420
+
421
+ Type: (`"wfs"` | `"wms"`)
422
+
423
+ #### wfsStrategy
424
+
425
+ Strategy function for loading features. Only works if mode is "wfs"
426
+
427
+ Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
428
+
429
+ #### cqlFilter
430
+
431
+ The cql_filter GeoServer parameter is similar to the standard filter parameter,
432
+ but the filter is expressed using ECQL (Extended Common Query Language).
433
+ ECQL provides a more compact and readable syntax compared to OGC XML filters.
434
+ For full details see the [ECQL Reference](https://docs.geoserver.org/stable/en/user/filter/ecql_reference.html#filter-ecql-reference) and CQL and ECQL tutorial.
435
+
436
+ Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
437
+
438
+ #### tilesBuffer
439
+
440
+ The buffer parameter specifies the number of additional
441
+ border pixels that are used on requesting rasted tiles
442
+ Only works if mode is 'wms'
443
+
444
+ Type: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
445
+
446
+ ### I18n
447
+
448
+ **_\[interface]_** - Custom Language specified when creating a WFST instance
449
+
450
+ #### labels
451
+
452
+ Labels section
453
+
454
+ Type: {select: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, addElement: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, editElement: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, save: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, delete: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, cancel: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, apply: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, upload: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, editMode: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, confirmDelete: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, geomTypeNotSupported: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, editFields: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, editGeom: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, selectDrawType: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, uploadToLayer: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, uploadFeatures: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, validFeatures: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, invalidFeatures: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, loading: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, toggleVisibility: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, close: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?}
455
+
456
+ #### errors
457
+
458
+ Errors section
459
+
460
+ Type: {capabilities: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, wfst: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, layer: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, noValidGeometry: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, geoserver: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, badFormat: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, badFile: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, lockFeature: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, transaction: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?, getFeatures: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?}
461
+
462
+ ## TODO
463
+
464
+ - \~~Add support to diferent layer styles~~
465
+ - \~~Improve widget controller: visibility toggle~~
466
+ - \~~Add events~~
467
+ - Add customizables styles
468
+ - Improve scss (add variables)
469
+ - Add cookies to persist widget controller state
470
+ - Geometry type _LinearRing_ support
471
+ - Tests!
472
+ - Improve comments and documentation
473
+ - Improve interface
474
+ - Change svg imports to preserve svg structure
475
+
476
+ ## License
477
+
478
+ MIT (c) Gastón Zalba.