This sample shows how to access an OGC WFS service, view the available feature types, and add features to the map with a WFSLayer.
Enter the URL to your WFS endpoint, select the Get button, and then select a FeatureType from the list to add it to the map as a WFSLayer.
Creating a WFSLayer
To create a WFSLayer, all you need is the URL to a WFS service that supports WFS 2.0.0 and has GeoJSON output format enabled.
Optionally, you can set the name to the FeatureType you want to access in the service.
If no name is provided, the layer will default to the first FeatureType in the service.
const layer = new WFSLayer({
url: "https://geobretagne.fr/geoserver/ows", // url to your WFS endpoint
name: "fma:bvme_zhp_vs_culture" // name of the FeatureType
});
map.add(layer); // add the layer to the mapUsing wfsUtils to browse feature types in the service
This sample shows how you can use the wfsUtils class to browse FeatureTypes in the WFS service before adding them to your map.
To do this, we use wfs, which executes the GetCapabilities request on the WFS service and returns the feature types.
wfsUtils.getCapabilities(url).then((capabilities) => {
// create a list of the returned feature types
createLayerList(wfsCapabilities.featureTypes);
});To create the list of available feature types on the service, we use calcite components, a set of responsive, reusable web components from Esri's new design system.
// create a list from the featureTypes available in the service
function createLayerList(featureTypes) {
const list = document.createElement("calcite-pick-list");
list.filterEnabled = true;
featureTypes.forEach((feature) => {
const listitem = document.createElement("calcite-pick-list-item");
listitem.label = feature.title;
listitem.value = feature.name;
list.appendChild(listitem);
});
listArea.appendChild(list);
loader.active = false; // stop loading
list.addEventListener("calciteListChange", updateSelectedLayer);
}When an item is selected from the list, we will get information about the selected feature type using the
get method on wfs. Then we can
use the results of that method to create our WFSLayer and add it to the map.
function updateSelectedLayer(event) {
// get the layer name from the clicked item
const layerName = event.detail.keys().next().value;
// get layer info for the feature type that was clicked
wfsUtils.getWFSLayerInfo(wfsCapabilities, layerName).then((wfsLayerInfo) => {
// create a WFSLayer from the layer info
const layer = WFSLayer.fromWFSLayerInfo(wfsLayerInfo);
map.add(layer);
})
}