Select to view content in your preferred language

Some WFS Layer properties are missing when querying

271
6
10-08-2024 11:23 AM
ClintonLunnUGS
Emerging Contributor

Hi all,

I am seeing an interesting issue when trying to use a WFSLayer. This is not returning the name field in the response. Is this a reserved word or am I missing something else? 

An example call to our endpoint: https://ugs-geoserver-prod-flbcoqv7oa-uc.a.run.app/geoserver/groundwater/ows?service=WFS&version=1.0...

See below for a code sample:

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>WFSLayer | Sample | ArcGIS Maps SDK for JavaScript 4.30</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.30/"></script>
    <script type="module" src="https://js.arcgis.com/calcite-components/2.8.5/calcite.esm.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.8.5/calcite.css" />

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/WFSLayer",
            "esri/layers/ogc/wfsUtils",
            "esri/widgets/LayerList"
        ], function (Map, MapView, WFSLayer, wfsUtils, LayerList) {
            let wfsCapabilities;

            // set up map and view
            const map = new Map({
                basemap: "gray-vector"
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-112, 39.5],
                zoom: 7,
            });


            // create and add a WFSLayer to the map
            const layer = new WFSLayer({
                url: "https://ugs-geoserver-prod-flbcoqv7oa-uc.a.run.app/geoserver/groundwater/ows", // url to your WFS endpoint
                name: "groundwater:ugs_gw_sites", // name of the FeatureType
                popupTemplate: {
                    title: "{site_name}",
                    content: "this should be a name: {name}, projectId: {projectId}, siteId: {siteId}"
                }
            });
            map.add(layer);
            view.ui.add(
                new LayerList({
                    view: view
                }),
                "bottom-left"
            );
        });
    </script>
</head>
<html lang="en">

<body>
    <div id="viewDiv"></div>
</body>

</html>

 

6 Replies
JeffreyThompson2
MVP Regular Contributor

https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html#outFields

If you are going to make your own PopupTemplate, you need to define the outFields property. This is an array of fields that the popup will need to access to properly construct your popup.

GIS Developer
City of Arlington, Texas
0 Kudos
ClintonLunnUGS
Emerging Contributor

thanks for the quick reply, but I that didn't get me there either. I (maybe incorrectly assumed) that if I didn't specify outfields then it was implicitly setting as. `["*"]`

See below for updated sample. after reading the docs, it looks like I can specify outfields on both the layer level and the popuptemplate level. i've tried setting both, setting individually, specifically naming the fields.

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>WFSLayer | Sample | ArcGIS Maps SDK for JavaScript 4.30</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.30/"></script>
    <script type="module" src="https://js.arcgis.com/calcite-components/2.8.5/calcite.esm.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.8.5/calcite.css" />

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/WFSLayer",
            "esri/layers/ogc/wfsUtils",
            "esri/widgets/LayerList"
        ], function (Map, MapView, WFSLayer, wfsUtils, LayerList) {
            let wfsCapabilities;

            // set up map and view
            const map = new Map({
                basemap: "gray-vector"
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-112, 39.5],
                zoom: 7,
            });


            // create and add a WFSLayer to the map
            const layer = new WFSLayer({
                url: "https://ugs-geoserver-prod-flbcoqv7oa-uc.a.run.app/geoserver/groundwater/ows", // url to your WFS endpoint
                name: "groundwater:ugs_gw_sites", // name of the FeatureType
                popupTemplate: {
                    title: "{site_name}",
                    content: "this should be a name: {name}, projectId: {projectId}, siteId: {siteId}, this totalwellnumber should not be included: {totalwellnumber}",
                    outFields: ["*"]
                },
                outFields: ["*"]
            });
            map.add(layer);
            view.ui.add(
                new LayerList({
                    view: view
                }),
                "bottom-left"
            );
        });
    </script>
</head>
<html lang="en">

<body>
    <div id="viewDiv"></div>
</body>

</html>

 

0 Kudos
JeffreyThompson2
MVP Regular Contributor

Are the other attributes in your template coming through as expected?

The popupTemplate pulls from the graphic.attributes object of the selected feature. Can you confirm that your layer has a attribute called name (case-sensitive)?

GIS Developer
City of Arlington, Texas
0 Kudos
ClintonLunnUGS
Emerging Contributor

The other attributes are showing up correctly. I've tried different casing. How can I access the graphic.attributes? 

The more I look into this, the more I believe it might be an issue with our WFS service. There is a setting on our geoserver instance that lets us override the default GML attributes for WFS services. 

gml.png

Checking this box allows the name attribute to be returned. So, I don't think this is an issue with the arcgis mapping library at all, but rather with our lack of understanding of how geoserver works. 

I appreciate your help, and we're going to continue our troubleshooting on the geoserver forums since that seems to be the root issue. 

0 Kudos
JayHill
Frequent Contributor

the outFields was set on the wfsLayer as ["*"].  It seems as though that field/column gets lost when moves to the layerview. I see the attribute in the call to get the json from the endpoint.

Screenshot 2024-10-08 at 1.03.16 PM.png

0 Kudos
JayHill
Frequent Contributor
0 Kudos