Query features from a FeatureLayerView

The FeatureLayerView provides access to a layer's features that are displayed in the view. This sample uses the whenLayerView() method to get the FeatureLayer's layer view once it's created.

1
2
const layerView = await view.whenLayerView(featureLayer);
// do something with the layerView

Once the layer view is available, you need to set up a watch on the dataUpdating property of the layer view. You must wait for all the features to finish updating in the view before performing a query.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
reactiveUtils.when(
  () => !layerView.dataUpdating,
  async () => {
      // query all the features available for drawing.
      try {
        const results = await layerView.queryFeatures({
          geometry: view.extent,
          returnGeometry: true,
          orderByFields: ["GEOID"]
        });

        const graphics = results.features;
        // do something with the resulting graphics

      } catch (error) {
        console.error("query failed: ", error);
      }
  }
);

Once you gain access to the graphics available to the layer view, you can use them for a variety of purposes, such as creating drop down menus, or lists, as this sample does. Once a list is created you can listen for click events on each list node and open a popup at the location of the feature when the corresponding node is clicked.

1
2
3
4
view.openPopup({
  features: [result],
  location: result.geometry.centroid
});

While the popup is typically used with a feature layer, you can also display the popup in response to a query or some other action that does not involve a graphic or a feature. For example, you can display a popup on the view when user clicks on a table row, or a list. The resulting popup in this sample is displayed at the center of a zip code polygon and its content and title will be populated from the features parameter.