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

Map Loading Progress Bar/Animation Javascript 4.x

BobNichols

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.

Encontre mais publicações marcadas com

Accepted answers

All comments

StephenLead

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

DavideLimosani

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

DavidChrest

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 .

rscheitlin

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.

BobNichols

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.

rscheitlin

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.

kenbuja

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

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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