The name of the OpenLayers geometry is not preserved upon loading from WFS

While using OpenLayers 6 and GeoServer 2.16 (with PostGIS), I encountered a problem where the geometry name of loaded layers from GeoServer gets overwritten. In GeoServer, the geometry name (and column in PostGIS) is defined as geom. The XML response from GeoServer reflects this structure. However, in OpenLayers, the object assigns the geometry name as geometry, disregarding the original name provided by GeoServer.

Although it may seem like a minor issue, it causes errors when attempting to edit features, resulting in an error message such as 

org.geoserver.wfs.WFSException: No such property: geometry
. Manually changing the geometry name and its corresponding value in my code feels like a temporary workaround rather than a proper solution.

I'm uncertain whether this behavior is due to a bug or if there's a specific setting that I have overlooked in the documentation.

Any assistance on this matter would be greatly appreciated! (I couldn't find any similar questions regarding this particular error; most inquiries seem to focus on POST requests, whereas mine pertains to WFS retrieval. Please inform me if this question has already been addressed elsewhere.)

javascripttypescriptopenlayersgeoserveropenlayers-6

Answer №1

To resolve this issue, simply instruct OpenLayers to retrieve the geometry column name from the input data. When dealing with GeoJSON:

source: new VectorSource({
    format: new GeoJSON({ extractGeometryName: true }),
    url: ...
}),

Answer №2

Could this be a bug? It's quite frustrating not having updated documentation on editing features in OpenLayers.

Here are a couple of possible solutions:

  1. One option is to change the name of the PostGIS field. You could rename the PostGIS field or set it as the geometry field name to geometry during the import process.

  2. Alternatively, you can manually adjust the edit request in OpenLayers. Typically, editing features involves sending an XML or POST request to GeoServer. Before sending the request, simply replace geometry with geom. Here's an example:

var node = wfs.writeTransaction(null, [feature], null, gml);
var s = new XMLSerializer();
var str = s.serializeToString(node);
str = str.replace("geometry", "geom");
xhr.open('POST', 'http://localhost:8080/geoserver/wfs', true);
xhr.send(str);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue stemming from reactivity causing difficulties with Vuex data mutation within actions

I have a Vuex store action that needs to interact with the API using new data for updating purposes. My goal is to create a separate object that mirrors an existing value in the store, allowing me to manipulate it without affecting reactivity. However, w ...

typescriptvue.jsnuxt.jsvuex

Avoid displaying the image when encountering a 404 error, but sometimes a broken image may still appear momentarily

Here is the code snippet I'm currently using: <img ng-show="json.user.picture" ng-src="{{json.user.picture}}" ng-error="json.user.picture = false"> When accessing an image from an external website without permission, a 404 error code is return ...

javascripthtmlcssangularjssrc

Passing a type as an argument in Typescript

How can I pass a type as a parameter in Typescript? type myType = {} const passingType = (t: Type) => { const x : t = {} } passingType(myType); I keep receiving TypeScript errors. 't' is referencing a value, but it is being used as a t ...

typescripttypescript-typings

The type of Object.values() is not determined by a union or Records

When utilizing TypeScript, the Object.values() function encounters issues in deducing the accurate type from a union of Records: type A = Record<string, number>; type B = Record<string, boolean>; function func(value: A | B) { const propert ...

typescript

Is there a way to verify that all CSS files have been successfully downloaded before injecting HTML with JavaScript?

I am looking to dynamically inject HTML content and CSS URLs using JavaScript. I have more than 3 CSS files that need to be downloaded before the content can be displayed on the page. Is there a way to check if the aforementioned CSS files have finished ...

javascriptcssajaxparallel-processing

How to access a controller function within a recursive directive template in Angular version 1.3?

In my parent directive, I am able to access controller functions using the $parent operator. However, this method does not work in recursive child directives. Here is a shortened example of the issue: // Sample controller code (using controllerAs):--- va ...

javascriptangularjsweb-applicationsangularjs-directivefrontend

Angular 16 - ALERT! FirebaseError: The first argument passed to the collection() function must be either a CollectionReference, a DocumentReference, or FirebaseFirestore

While working on my Angular CRUD project with Firestore integration, I encountered an issue. Whenever I try to add a new object to the database, I receive the following error message: "ERROR FirebaseError: Expected first argument to collection() to be a Co ...

angulartypescriptgoogle-cloud-firestore

Ways to structure a MySQL query based on date range using JavaScript

How can I retrieve data between two dates using express js in JavaScript? The query I am using is shown below: period = `created_datetime BETWEEN ` + fromdate + ` AND ` + todate; However, I am encountering an error as follows: You have an error in your S ...

javascriptmysqlnode.jsexpress

Clickable Slider Picture

I'm having a minor issue with a jQuery script that slides images on my website. The script itself is functioning properly, but I am trying to add links to each image. I've attempted placing <a href> and </a> tags around the <img> ...

javascriptjqueryhtml

What is the best way to retrieve a MariaDB query result using Node.js?

I've been delving into the world of Node.js to enhance my web development skills, particularly in retrieving data from a mariaDB using SELECT queries and converting it into JSON for client requests. Despite scouring the internet and stackoverflow, I h ...

javascriptnode.jsmariadbmariasql

Create an array of dynamically calculated properties from the Vuex state array, which can then be utilized in the v-model

In my Vue 3 setup, I have a Vuex store with an array in the state: const store = createStore({ state: { questions: [ { text: 'A', value: false }, { text: 'B', value: false }, { text: 'C', value: true }, ...

javascriptvue.jsvuexvuejs3v-model

Coverage report not generated when running jest

I need to include some functions (sum, mul, sub, div) in the test file as shown below, import {describe, expect} from "@jest/globals"; function sum(a,b) { return a+b; } const div = (a,b) => { return a/b; } const mul = (a,b) => { ...

javascriptnode.jsunit-testingtestingjestjs

Does AJAX truly operate asynchronously?

When triggering an ajax call, the usual practice in client-side code is to create an "xmlhttp" variable and constantly check for status changes until the response is fully loaded. This creates a connection or thread between the client and server, with resp ...

javascriptajaxasynchronous

How to send an AJAX request using jQuery?

I am struggling to locate specific examples of what I need. My objective is to access sample.aspx and send plain text parameters using the POST method (not as part of the query string). Upon successful submission, I aim to analyze the JSON response. In cas ...

c#javascriptjqueryasp.netajax

The screen-responsive navigation bar is experiencing functionality issues

I am facing an issue with my navigation bar on both desktop and mobile. When I maximize the window while the mobile navbar is open, it disappears as expected but the desktop navbar does not appear. I am using a bootstrap template and I am unsure if solving ...

javascripthtmlcss

Spontaneously generating visuals that lead an unpredictable existence

Every 0-2 seconds, I generate a unique image and place it randomly within a designated area. setTimeout("addImage()", Math.floor((Math.random() * 2000) + 1)); To maintain order, I want these images to vanish after being visible for an interval o ...

javascriptjquery

Is the data retrieved by the AngularJS service being withheld from the controller?

I am facing an issue where scope.membersWarnings in the controller is always empty, even though it receives data from the server in the service. The data seems to be lost between the callback of the get function in the service and the controller. Controll ...

javascriptangularjsangularjs-serviceangular-promise

Generating a USA map with DataMaps in d3jsonData

I'm trying to create a basic US map using the DataMaps package and d3 library. Here's what I have attempted so far: <!DOCTYPE html> <html> <head> <title> TEST </title> <script src="https://d3js.org/d3.v5.js"> ...

javascriptd3.js

How to break out of an endless loop in Node.js and Express.Js

I have developed an Express app that is designed to paginate through an external API call. I have thoroughly examined the code but for some reason, the loop condition to break the function isn't being triggered. Any assistance on this matter would be ...

javascriptnode.jsexpress

Ways to activate flashlight on mobile using React.Js

Is it possible to control the torch light of a mobile device by toggling a button? https://i.stack.imgur.com/x9nIf.png <IconButton onClick={() => setFlashOn(!flashOn)} style={{ position: "absolute", right: 80, top: 20, zIndex: ...

javascriptreactjsmaterial-ui