Feature widget - Query graphics from multiple layerViews

This sample is similar to the Feature widget in a side panel sample with the exception that this sample demonstrates working with multiple layers of different types. This sample uses three separate layers: two imagery layers and one feature layer. This sample works with the Popup's fetchFeatures method. This takes a given screen location and returns features from multiple LayerViews. It displays information based on the layer's associated PopupTemplate.

First, listen for the view's click event and pass this into the fetchFeatures method.

1
2
3
4
5
6
7
view.on("click", (event) => {
  ...
  // Call fetchFeatures and pass in the click event location
  view.popup.fetchFeatures(event).then((response) => {
   // Do something
  });
});

Next, iterate through all of the returned features to access their associated LayerView and graphics.

1
2
3
4
5
 view.popup.fetchFeatures(event).then((response) => {
   response.promisesPerLayerView.forEach((fetchResult) => {
     // Do something
   });
  });

Then, loop through the returned graphics from the resulting LayerViews and pass this graphic into the Feature widget's graphic property.

1
2
3
4
5
6
7
8
9
 graphics.forEach((graphic) => {

   const featureChild = new Feature ({
     container: document.createElement("div"),
     graphic: graphic,
     map: view.map,
     spatialReference: view.spatialReference
   });
 });