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>
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.
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>
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)?
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.
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.
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.