Alter query features from FeatureLayerView

[BenBabbel]

Hello, I was wondering what would be the best way to adapt the query features from FeatureLayerView as seen in Query features from a FeatureLayerView | ArcGIS API for JavaScript 4.12 so that the list on the right simply includes all features rather than just the ones within the view extent. I would like to keep all other parts to this function (zoom to feature when clicked, popup box..), but I just want to make it so all features are displayed on the list, and the list does not change when a feature is clicked then zoomed to.

Thanks!

[AnneFitz]

Hi Ben,

To include all features, remove geometry: view.extent from the parameters of layerView.queryFeatures, then it should show all features instead of just the ones in the view. 

layerView.queryFeatures({
   geometry: view.extent,
   returnGeometry: true
}).then(function(results) { ... });

See FeatureLayerView.queryFeatures() and Query for more information on creating client-side queries. Hope this helps!

[BenBabbel]

Thank you for the response. I have actually tried that (both in my own JS code and in the Arc sandbox), but when I zoom to other features the list on the right still updates to reflect only the features that are in the current view extent. My hope is that the list stays constant with all features, even when I zoom to specific features. 

[RobertScheitlin__GISP]

Ben,

   The FeatureLayerView queryFeatures method states:

Executes a Query against features available for drawing in the layer view and returns a FeatureSet.

If you want all feature that the layer has then you need to query the actual layer and not use the layer view.

[AnneFitz · Accepted solution]

Hi Ben,

You can also query all features from the featurelayer when the layer loads, which will guarantee that you will get all features in the layer. Though if you have thousands of features, this will affect the app performance. This codepen shows querying features from the layer: https://codepen.io/U_B_U/pen/XWrgWeR?&editable=true&editors=100

In regards to list updating, the app is currently watching for layerView.updating property so that the list will update when the user moves into a different view. If you wanted to query on the layerView, you could use the following method: watchUtils.whenFalseOnce(layerView, "updating", function(){ ... } which would run the logic only once when the app loads (this is commented out in the codepen). Hope this helps!

Thanks,

Anne

[BenBabbel]

Awesome, thank you both for your help! That seems to be doing the trick.

[BenBabbel]

Hello Anne, something else has come up since following this method. While my original issue has been resolved (the list continuing to show all available layers - thank you again!), I noticed that the feature itself is no longer "selected" after clicking on one of the items on the populated list. The original code in the Query features from a FeatureLayerView automatically "selects" the feature once an item on the list is clicked. This became an issue because I have since  included a "Download Data" button to the pop-up for users to be able to download a zipped GeoTiff of the layer they are viewing, but the Download button does not work unless the feature in question is actually selected.

Long story short, what is the best way to tweak this adapted code so that the feature which is being zoomed to is ALSO automatically selected?

As reference, this is the code I wrote to allow for the downloading of the data. It simply is meant to open the URL (found in the feature's attribute table) of the zipped raster.

view.when(function() {
   var popup = view.popup;
   popup.viewModel.on("trigger-action", function(event) {
   if (event.action.id === "download-dem") {
      var attributes = popup.viewModel.selectedFeature.attributes;
      // Get the 'website' field attribute
      var info = attributes.Download;
      // Make sure the 'website' field value is not null
      if (info) {
      // Open up a new browser using the URL value in the 'website' field
      window.open(info);
                  }
            }
      });
});

[AnneFitz]

Hi Ben,

Try this:

view.popup.open({

   fetchFeatures: true,

   location: result.geometry.centroid

});

Here's a codepen with the change at line 165: https://codepen.io/annefitz/pen/zYObyJG 

The fetchFeatures parameter is new as of 4.12 and I think will help you achieve what you are trying to accomplish. Let me know if that works for you!

Thanks,

Anne

[BenBabbel]

Thank you for the speedy response. I added the fetchFeatures in and I noticed that, for whatever reason, it only works if I click on the list item twice. One click zooms to the feature, but the second click will then select the feature. Here is what I have for my code:

if (result) {
   // open the popup at the centroid of satellite line
   // and set the popup's features which will populate popup content and title.
   view.goTo(result.geometry.extent.expand(1)).then(function() {
      view.popup.open({
      fetchFeatures: true,
      location: result.geometry.centroid,
      features: [result]
});
   view.popup.dockOptions = {
   buttonEnabled: false,
   breakpoint: false
   };
   });
   }
}

(Also, as a side note - I have my result.geometry.extent.expand at (1) rather than (2) like in your code, because I noticed a strange thing that if you click on the same list item multiple times, it keeps zooming out from the selected feature, and permanently has the view zoomed out for that feature until the page is refreshed. Not sure what is going on there either). 

[AnneFitz]

Hi Ben,

Sorry I realized where the actual issue is. You don't need fetchFeatures, features: [result] should work fine. The real issue is coming from featureLayer.queryFeatures() because the outfields must be specified in order for the object to highlight. I just specified the Name, ObjectID, and the fields listed in the popup template to help improve performance time, but you can get all outfields using outfields: ["*"]

featureLayer.queryFeatures({
   where: "1=1",
   outFields:["NAME","B12001_calc_pctMarriedE","B12001_calc_numMarriedE","B12001_calc_numNeverE","B12001_calc_numDivorcedE","OBJECTID"],
   returnGeometry: true
});

Here's another codepen showing this change, and showing some of the custom actions you can add to the popup: https://codepen.io/annefitz/pen/gOYyLXQ Hope this helps!