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!
Solved! Go to Solution.
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.
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.
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!
As long as you clear the timeout handler before setting it again it should be fine.
Surely I will, thank you!
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);
}
});
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.