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

loading indicator &amp; secured feature layers

danbecker

ShowLoadingMessage fires and displays loading animation

dojo.connect(map,"onUpdateStart", ShowLoadingMessage('Loading...'))

HideLoadingMessage fires when the basemap is successfully drawn

dojo.connect(map, "onUpdateEnd", HideLoadingMessage);

identifyManager login then pops up, asking for username/password.

After signing in, the 9 feature layers are then added to map, but it takes a few seconds;

how do I fire my ShowLoadingMessage, then fire HideLoadingMessage when all feature layers are drawn?

I looked through featurelayer events and can't find what I'm looking for.

thanks!

Finde mehr Beiträge mit dem Tag

Accepted answers

derekswingley1

onLayerAdd fires when a layer is added to the map. A layer being added to the map is not the same as all features being visible on the map.

Ideally, your features would load fast enough that you don't need to show a loading icon. If that's not the case, look at using your layers' onUpdateEnd event. You could set up a listener for this event and then disconnect the listener after the event fires the first time. To do this for multiple layers, you could check each layer's updating property. When all updating is false for all your feature layers, you would hide your loading icon and disconnect your event listener using dojo.disconnect.

All comments

derekswingley1

Nice, can you mark my post as an answer?

Edit: look like you marked this answered, thanks!

danbecker

adding the onUpdateEnd listener to the last featLayer that's added to the map seemed to do the trick. I also changed to "ONDEMAND" mode.

dojo.connect(map, "onLayerAdd", function(layer) {
 //console.log(layer.id);
 if(layer.id == "featLayer1"){
  ShowLoadingMessage('Loading...'); // <-- fires loading indicator
 }
});
var handle = dojo.connect(featLayer3, "onUpdateEnd", function(){
 createLabels();
 HideLoadingMessage(); <--hides load indicator
 dojo.disconnect(handle)
});

derekswingley1

I noticed that when the featlayer is added to the map a RestURL/layerID/query? call is made to the server. It looks like the features aren't actually displayed until the query is returned from the server, which in my case takes awhile because some of the featlayers have >1K records.

That's correct. When you create a feature layer, a call is made to the map service layer that will be used for the feature layer to get the layer's metadata. Things like field info, scale dependencies, etc. are retrieved. If you're using ONDEMAND mode, features are retrieved when the layer is added to the map.

danbecker

onLayerAdd fires when a layer is added to the map. A layer being added to the map is not the same as all features being visible on the map.

Ideally, your features would load fast enough that you don't need to show a loading icon. If that's not the case, look at using your layers' onUpdateEnd event. You could set up a listener for this event and then disconnect the listener after the event fires the first time. To do this for multiple layers, you could check each layer's updating property. When all updating is false for all your feature layers, you would hide your loading icon and disconnect your event listener using dojo.disconnect.

thanks for the reply.

I noticed that when the featlayer is added to the map a RestURL/layerID/query? call is made to the server. It looks like the features aren't actually displayed until the query is returned from the server, which in my case takes awhile because some of the featlayers have >1K records.

I'll try this out and report back...

derekswingley1

danbecker

Here's what I have.
It fires the loading indicator fine, but hides the indicator too soon. It's still several seconds after the indicator is hidden that featLayer3 actually appears on the map...

what could be causing this?

dojo.connect(map, "onLayerAdd", function(layer) {
 //console.log(layer.id);
 if(layer.id == "featLayer1"){
  ShowLoadingMessage('Loading...'); // <-- fires loading indicator
 }
 else if (layer.id == "featLayer3"){
  HideLoadingMessage(); // <--hides loading indicator
 }
});
var legendLayers = [];

var featLayer1 = new esri.layers.FeatureLayer(url11, {id:'featLayer1'});
legendLayers.push({layer:featLayer1,title:"featLayer1"});

var featLayer2 = new esri.layers.FeatureLayer(url22, {id:'featLayer2'});
legendLayers.push({layer:featLayer2,title:"featLayer2"});

var featLayer3 = new esri.layers.FeatureLayer(url33, {id:'featLayer3'});
legendLayers.push({layer:featLayer3,title:"featLayer3"});


var featLayers = [];
dojo.forEach(legendLayers,function(layer){
 featLayers.push(layer.layer)
});
map.addLayers(featLayers);

danbecker

thanks paul; that should get me going!

PaulBushore

Hello,

If you had a function that loaded the 9 services, you could have the showloading function fire prior to the load then have an onLayerAdd event listener on the map that would check if the layer being added matches the last layer of your 9 services. Once it matches you would then fire the hideloading.

I might try to add some code to describe a bit more clearly.

Here is a snippet:
dojo.connect(map, "onLayerAdd", function (layer) { console.log(layer.url + " added"); });

This would give you the url of the layer.

Best wishes,

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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