OGCFeatureLayer

This sample shows how to access an OGC API Features service using an OGCFeatureLayer. Since this layer type brings the data in as features, you can perform your own rendering, labeling, clustering, etc. See the API Reference for more information on what is supported.

The url and collectionId properties are required when creating a new OGCFeatureLayer.

1
2
3
4
5
6
const wineryLayer = new OGCFeatureLayer({
  url: "https://demo.ldproxy.net/vineyards", // url to the OGC service
  collectionId: "vineyards", // unique id of the collection
  labelingInfo: [{ ... }],
  renderer: { ... }
});

Filter the features on the OGCFeatureLayerView

The OGCFeatureLayer supports working with your features on the client through the OGCFeatureLayerView. We can use the filter button in the top-left of the view to filter the layerView by the area of the winery. When a filter is selected, we call the following function to apply the filter and effect.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const filterByType = (event) => {
  // close the popup if it's open
  if (view.popup.visible) {
    view.closePopup();
  }
  // determine filter definition based on the selected type
  const selectedType = event.target.getAttribute("data");
  if (!selectedType) {
    return; // do not set filter if one of the filters has not been clicked
  }
  let filterDef = "";
  switch (selectedType) {
    case "lessThan50":
      filterDef = "area_ha < 50";
      break;
    case "fiftyTo100":
      filterDef = "area_ha >= 50 AND area_ha <= 100";
      break;
    case "greater100":
      filterDef = "area_ha >= 100";
      break;
    default:
  }
  // apply the effect to the features
  wineryLayerView.featureEffect = {
    filter: {
      where: filterDef
    },
    excludedEffect: "opacity(20%)"
  };
};

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close