Automatic popup of only the visible features in a webmap after a spatial filter has been executed

[EmilyGoldsmith]

Hello,

I'm struggling to implement a pop-up in my app which shows the features of a webmap which have been filtered in a spatial query via a geometry (i.e. point, line, polgon.)

I wanted to ask whether it is possible to implement a pop-up in this way, or whether I would have to keep things simple and select only a point within a geometry, such as the centroid in this example? https://developers.arcgis.com/javascript/latest/sample-code/featurelayerview-query/

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

 I know that in examples like this, you can produce a pop-up via a click:

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-feature-multiple...

The way my app works is that a sketch geometry, 'filterGeometry' is generated and then used alongside a spatial relationship (e.g. 'intersect') to filter a view of all the layers in the webmap, called 'featureLayerView.' This results in 'featureFilter.'

        // set the geometry filter on the visible FeatureLayerView
        function updateFilter() {
          updateFilterGeometry();
          const featureFilter = {
            // autocasts to FeatureFilter
            geometry: filterGeometry,
            spatialRelationship: selectedFilter
          };

          featureLayerView.forEach((featureLayerView) => {
            if (featureLayerViewFilterSelected) { //If true
                featureLayerView.visible = true; //Set the layers to visible
              featureLayerView.filter = featureFilter; //filter the features
                       } else {
              featureLayerView.filter = null;//else nothing
            }
        }); 
      };

Would it be possible to enable a pop-up to automatically show after the sketch geometry has been drawn and the features have been filtered? (i.e. after the UpdateFilters() function has run.)

I'm still very new to app development, so any help would be greatly appreciated.

Many thanks.

[UndralBatsukh]

Hi there, 

I updated the features widget sample to allow users select features from a layer using a rectangle user draws on the map and display the popup info in Features widget. Hope you can use as a starting point: https://codepen.io/U_B_U/pen/JjzpNjx?editors=1000

The main part to pay attention to is the following, where you query the features from the layer view once user provides the spatial geometry. Then to pass the filtered features to  the Features widget's features property when calling its open method.

layerView.queryFeatures(query).then((results) => {
  if (results.features.length === 0) {
    return;
   } else {
     featuresWidget.open({
       location: event.mapPoint,
       features: results.features
     });
   }
 });

[EmilyGoldsmith]

Hi,

Many thanks for your reply and sorry for the delay in mine. This project has fallen to the wayside but I am still determined to figure it out.

Your edit of the features widget sample was very useful in helping me understand how I could implement something similar in my app. I believe i'm nearly there, I just need to figure out how to compile the pop-up details for each layer in the webmap's view into one pop-up. Currently, only the pop-up for the first layer appears as I have not configured it properly.

Here the code i've used so far to enable the pop-up to show upon drawing:

 // set the geometry filter on the visible FeatureLayerView
        function updateFilter() {
          updateFilterGeometry();
          const featureFilter = {
            // autocasts to FeatureFilter
            geometry: filterGeometry,
            spatialRelationship: selectedFilter
          };

          const query = {
            geometry: filterGeometry,
            outFields: ["*"]
          };

          featureLayerView.forEach((featureLayerView) => {
            if (featureLayerViewFilterSelected) { //If true
                featureLayerView.visible = true; //Set the layers to visible
              featureLayerView.filter = featureFilter; //filter the features
          
              featureLayerView.queryFeatures(query)
              .then((results) => {
                  if (results.features.length === 0) {
                    return;
                  } else {
                  view.openPopup({
                      location: filterGeometry,
                      features: results.features
                    });}})
                       } else {
                        
              featureLayerView.filter = null;//else nothing
            }

Do you know if it is possible to 'push' information from multiple layers into one pop-up? Or if a custom popuptemplate would be required for this functionality? 

To outline, this app is based upon the 'Filter SceneLayer with FeatureFilter' example which filters the view of features by a selected spatial relationship according to the geometry of the sketch drawn by the user: https://developers.arcgis.com/javascript/latest/sample-code/layers-scenelayer-feature-masking/

Many thanks again for your help.