When featurelayer done drawing

[Anonymous User]

Hi,

Can anyone give a pointer for the 4.x API that would allow me to listen for when a feature layer query is done?

My workflow allows a user to query a feature layer and draw a graphics layer based on the result of that query. Eventually the app zooms to the result. As some queries can load hundreds of complex feature, we need to put a sort of "processing" message on the app and remove it once finished. The only semi-reliable way to remove this processing message I've found is to listen for the map to stop zoom/panning to the new features. (The zoom will sometimes happen before all the features have been loaded from the query, as the query and draw are done with a promise (asynchronously)

        watchUtils.whenTrue(mapView, "stationary", function() {

          const modal = document.getElementById("myModal");

          modal.style.display = "none";

        });

Is there some watchUtils for a feature layer that I've missed reading over the doc?

thanks

[ReneRubalcava · Accepted solution]

You want to check for the FeatureLayerView updating property to be false.

Here is how you can check for when multiple layers are done loading when the app starts.

https://codepen.io/odoe/pen/vJdVpQ?editors=0011 

  Promise.all([
    view.whenLayerView(fLayer),
    view.whenLayerView(fLayer2)
  ]).then(([layerView1, layerView2]) => {
      return Promise.all(
        [
          whenFalseOnce(layerView1, "updating"),
          whenFalseOnce(layerView2, "updating")
        ]
      );
  }).then(() => {
    console.log("done updating")
  });‍‍‍‍‍‍‍‍‍‍‍‍‍

[Kathleen_Crombez]

This was exactly what I was looking for and works perfectly in my application.

However, at version 4.24 the watchUtils module is being depreciated and I read that it will be completely removed from the API at some future release.

Do you know how to implement this same behavior using the new reactiveUtils module instead?

[BlakeTerhune]

I missed that about watchUtils going away! Looks like it's getting replaced by reactiveUtils. Looking forward to hearing from the Esri team on this.

EDIT: I got reactiveUtils working with api v4.26 in the sample from @ReneRubalcava 

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/FeatureLayer",
    "esri/core/reactiveUtils"
  ], function(EsriMap, MapView, FeatureLayer, reactiveUtils) {
    
    const fLayer = new FeatureLayer({
      portalItem: {
        id: "848d61af726f40d890219042253bedd7"
      }
    });
    
    const fLayer2 = new FeatureLayer({
      url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Population_by_Race_and_Hispanic_Origin_Boundaries/FeatureServer/2"
    });
  
    const map = new EsriMap({
      basemap: "dark-gray-vector",
      layers: [fLayer, fLayer2]
    });
    
    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118, 34],
      zoom: 9
    });
    
    const goTo = view.goTo.bind(view);
   
    Promise.all([
      view.whenLayerView(fLayer),
      view.whenLayerView(fLayer2)
    ]).then(([layerView1, layerView2]) => {
        return Promise.all(
          [
            reactiveUtils.whenOnce(() => !layerView1.updating),
            reactiveUtils.whenOnce(() => !layerView2.updating)
          ]
        );
    }).then(() => {
      console.log("done updating")
    });
  });

[Kathleen_Crombez]

Thank you @BlakeTerhune !