Select to view content in your preferred language

When featurelayer done drawing

3153
4
Jump to solution
02-12-2020 08:42 AM
by Anonymous User
Not applicable

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

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Honored Contributor

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")
  });

View solution in original post

4 Replies
ReneRubalcava
Honored Contributor

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
Frequent Contributor

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?

0 Kudos
BlakeTerhune
MVP Regular Contributor

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
Frequent Contributor

Thank you @BlakeTerhune !

0 Kudos