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.

Use dark colors for code blocksCopy
       
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.

Use dark colors for code blocksCopy
     
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.

Use dark colors for code blocksCopy
         
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
   });
 });

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