nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Find more posts tagged with

Accepted answers

RRubalcava

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<SPAN class="punctuation token">.</SPAN><SPAN class="token function">all</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
    view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>fLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
    view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>fLayer2<SPAN class="punctuation token">)</SPAN>
  <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>layerView1<SPAN class="punctuation token">,</SPAN> layerView2<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="keyword token">return</SPAN> Promise<SPAN class="punctuation token">.</SPAN><SPAN class="token function">all</SPAN><SPAN class="punctuation token">(</SPAN>
        <SPAN class="punctuation token">[</SPAN>
          <SPAN class="token function">whenFalseOnce</SPAN><SPAN class="punctuation token">(</SPAN>layerView1<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"updating"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
          <SPAN class="token function">whenFalseOnce</SPAN><SPAN class="punctuation token">(</SPAN>layerView2<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"updating"</SPAN><SPAN class="punctuation token">)</SPAN>
        <SPAN class="punctuation token">]</SPAN>
      <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
    console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"done updating"</SPAN><SPAN class="punctuation token">)</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

KathleenCrombez1

Thank you @BlakeTerhune !

blake.terhune

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

KathleenCrombez1

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?

RRubalcava

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<SPAN class="punctuation token">.</SPAN><SPAN class="token function">all</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
    view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>fLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
    view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>fLayer2<SPAN class="punctuation token">)</SPAN>
  <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>layerView1<SPAN class="punctuation token">,</SPAN> layerView2<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="keyword token">return</SPAN> Promise<SPAN class="punctuation token">.</SPAN><SPAN class="token function">all</SPAN><SPAN class="punctuation token">(</SPAN>
        <SPAN class="punctuation token">[</SPAN>
          <SPAN class="token function">whenFalseOnce</SPAN><SPAN class="punctuation token">(</SPAN>layerView1<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"updating"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
          <SPAN class="token function">whenFalseOnce</SPAN><SPAN class="punctuation token">(</SPAN>layerView2<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"updating"</SPAN><SPAN class="punctuation token">)</SPAN>
        <SPAN class="punctuation token">]</SPAN>
      <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
    console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"done updating"</SPAN><SPAN class="punctuation token">)</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.