API for JS: How to know when a graphicsLayer's drawing is done?

1328
6
Jump to solution
12-05-2016 11:16 PM
JackyCai
New Contributor III

Hey guys,

What I am trying to do is to keep the loading icon until the drawing on the map is done, and I am using GraphicsLayer to display the features. I have tried to use map and layer events including "load", "update", "update-start", "update-end", during the process I clear all the graphics and add new graphics, but none of these events above is triggered. 

Does anyone have a solution for this? Thanks!

0 Kudos
1 Solution

Accepted Solutions
FC_Basson
MVP Regular Contributor

Have you defined the "load" event listener before adding the layer to the map (GraphicsLayer | API Reference | ArcGIS API for JavaScript 3.18 )?  As for update event listeners, they only fire when the viewport changes.  Otherwise, if it an issue of waiting for the API to draw a lot of features and the browser "hangs", have a look at the graphic-add event (GraphicsLayer | API Reference | ArcGIS API for JavaScript 3.18 ) - you could set a timeout handler after a graphic has been added and then just hide the loading icon after all the graphics have been added.

View solution in original post

6 Replies
FC_Basson
MVP Regular Contributor

Have you defined the "load" event listener before adding the layer to the map (GraphicsLayer | API Reference | ArcGIS API for JavaScript 3.18 )?  As for update event listeners, they only fire when the viewport changes.  Otherwise, if it an issue of waiting for the API to draw a lot of features and the browser "hangs", have a look at the graphic-add event (GraphicsLayer | API Reference | ArcGIS API for JavaScript 3.18 ) - you could set a timeout handler after a graphic has been added and then just hide the loading icon after all the graphics have been added.

JackyCai
New Contributor III

Thanks! It solves my problem perfectly. I thought of this method, but was thinking that the drawing time after the graphic is added might vary when there are too many graphics, but the fact is that it works pretty well!

0 Kudos
FC_Basson
MVP Regular Contributor

As long as you clear the timeout handler before setting it again it should be fine.

0 Kudos
JackyCai
New Contributor III

Surely I will, thank you!

0 Kudos
KenBuja
MVP Esteemed Contributor

This is how I turn on and off the loading icon ("loadingImg") when a layer is updating.

loading = dom.byId("loadingImg");

myLayer.on("update-start", function () {
  domUtils.show(loading);
});

myLayer.on("update-end", function (event) {
  domUtils.hide(loading);
  if (event.error !== undefined) {
    console.log("Update complete with error: " + event.error);
  }
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
JackyCai
New Contributor III

Thanks for the advice, Ken, I have tried this method, but as fcbassongis‌ mentioned, the update events fire only when the viewport changes, so it is not working for my case.

0 Kudos