topic Re: Map Loading Progress Bar/Animation Javascript 4.x in ArcGIS JavaScript Maps SDK Questions

Map Loading Progress Bar/Animation Javascript 4.x

BobNichols — Fri, 27 Jan 2017 00:12:20 GMT

I am pretty new to JavaScript and am having trouble figuring out how to display a "loading" gif onscreen while map items are loading. I have been able to figure out how to do it using the 3.x api but am stumped when trying to accomplish the same thing using the new arcgis-javavascript-4.2 version. Any help is greatly appreciated.

Re: Map Loading Progress Bar/Animation Javascript 4.x

KenBuja — Fri, 27 Jan 2017 17:48:25 GMT

The busyIndicator hasn't been added to 4.2 yet. Functionality matrix | ArcGIS API for JavaScript 4.2

Re: Map Loading Progress Bar/Animation Javascript 4.x

RobertScheitlin__GISP — Fri, 27 Jan 2017 18:03:02 GMT

Even if you do not concern yourself with the missing helper function busyIndicator there is the fact that the 4.x API still does not have an event dispatched when the map/view is done drawing. Now if you want to loop though the views layerViews and watch the updating property then you can probably do it.

FeatureLayerView | API Reference | ArcGIS API for JavaScript 4.2 | updating

I do not have any code samples to demo this though.

Re: Map Loading Progress Bar/Animation Javascript 4.x

BobNichols — Fri, 27 Jan 2017 18:38:39 GMT

Thank you for the confirmation that there is no event that is fired when the view is finished drawing. I thought that I was missing something when going through the api reference guide. Seems like an odd and incredibly useful event to leave out. I will probably just wait for the "Coming Soon" busyIndicator then.

Re: Map Loading Progress Bar/Animation Javascript 4.x

RobertScheitlin__GISP — Fri, 27 Jan 2017 18:49:51 GMT

Bob,

The busyIndicator is a simple helper class to do the DOM work for you and show a indicator based on the show and hide methods. It would still have to be triggerd by an event or function. So what we are really waiting for is a updating-end event or the likes that the 3.x api has.

Re: Map Loading Progress Bar/Animation Javascript 4.x

DavidChrest — Mon, 30 Jan 2017 13:10:24 GMT

The LayerList widget actually has a little animated horizontal bar for each layer while it's loading and stops when is complete. See LayerList widget | ArcGIS API for JavaScript 4.2 .

Re: Map Loading Progress Bar/Animation Javascript 4.x

DavideLimosani — Tue, 11 Apr 2017 09:05:33 GMT

Waiting for the BusyIndicator, this can be easily achieved watching the property "updating" of your view and dojo Toggler

loading = new Toggler({
node: "loadingImg"
});

app.mapView.watch("updating", function (updating) {
updatingViewChange(updating);
});

function updatingViewChange(updating)
{
   if (updating) {
      loading.show();
   }
   else {
      loading.hide();
   }
}

Re: Map Loading Progress Bar/Animation Javascript 4.x

StephenLead — Sun, 12 Dec 2021 16:21:05 GMT

In the current version (v4.10) it is possible to display a "loading" indicator by using watchUtils and looking at the view's updating property:

// Display the loading indicator when the view is updating
watchUtils.whenTrue(view, "updating", function(evt) {
   $("#loading").show();
});

// Hide the loading indicator when the view stops updating
watchUtils.whenFalse(view, "updating", function(evt) {
   $("#loading").hide();
});

See a working demo at Show a loading indicator using ArcGIS JS API v4