topic Re: How to properly check if a FeatureLayer object has been loaded? in ArcGIS JavaScript Maps SDK Questions

How to properly check if a FeatureLayer object has been loaded?

SamuelAbati — Sat, 11 Dec 2021 14:29:02 GMT

So, I know the documented way to do it would be like this :

const fl = new featureLayer(url);
fl.on('load', () => {
   doSomething();
})‍‍‍‍‍‍‍‍‍‍‍‍

But there is a problem with the approach above, if the featureLayer has already loaded between its creation and the event binding, doSomething() will never trigger.

This would be solved by simply having a callback parameter on the featureLayer constructor, which doesn't.

So, for now I'm using the following solution :

const fl = new featureLayer(url);
if(!fl.loaded){             
    fl.on('load', () => {                    
        doSomething();                
    })
}else{                
    doSomething();
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

But there's also a very nasty possible error with my temporary solution, it can happen that the featureLayer will load between the if/else check, and then doSomething() will never trigger.

Is there an actual solution to this? Is this a bug? Am I missing something?

Here's a pen showing the issue : FeatureLayer

I'm using the setTimeout to force the layer to load, in our company the arcgis server is local so they load really fast, before binding the event as I stated above

Re: How to properly check if a FeatureLayer object has been loaded?

MunachisoOgbuchiekwe — Sat, 11 Dec 2021 14:29:04 GMT

Hello Samuel,

This may or may not be a solution to your problem, but if you were using the 4.x API you can use a promise to solve this. I am assuming you are using 3.x, so you can wrap the load event in a promise and essentially get the same affect.

require([
    "esri/map",
    "esri/layers/FeatureLayer",
    "dojo/domReady!"
], function (Map,FeatureLayer) {

    //Initializing the map constructor

    var map = new Map("map", {
        center: [-118, 34.5],
        zoom: 8,
        basemap: "topo"
    });
     
     var fl = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0");
     
     //create a promise
     var promise = new Promise((resolve, reject) => {
        fl.on('load', (e) => {
            console.log(e);
            resolve(e.layer.loaded)
            reject("Something is wrong");
        })
     });
     
    promise.then((e) => {
        if(e){
            console.log("The layer has loaded");
        }
    });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to properly check if a FeatureLayer object has been loaded?

SamuelAbati — Wed, 02 May 2018 18:35:35 GMT

Yes I'm using the 3.X

Are you positive this method works even if the featureLayer loaded before creating the promise?

Re: How to properly check if a FeatureLayer object has been loaded?

SamuelAbati — Wed, 02 May 2018 18:55:37 GMT

See this pen : FeatureLayer

It didn't solve it I'm afraid.

I'm not confident I could do it as the source is minified, but if this is a missing feature, it could be solved by overwriting the FeatureLayer constructor with a callback.

Re: How to properly check if a FeatureLayer object has been loaded?

MunachisoOgbuchiekwe — Wed, 02 May 2018 20:24:26 GMT

Ah, okay I see what you are saying now. Yea, I don't think this workflow would work in 3.x. In 4.x a lot of the modules have promises that allow you to get a result back once the object has loaded. Since 3.x is event driven, you wouldn't be able to get the functionality you want unless, like you said, add in that functionality yourself.

Re: How to properly check if a FeatureLayer object has been loaded?

SamuelAbati — Wed, 02 May 2018 21:44:21 GMT

To me it feels more like a bug than a missing feature.

Unfortunately all our codebase is already built upon 3.x, I can't change that now.

In the example I use the setTimeout to force the layer to load, because in our company the arcgis server is local so they featureLayer object loads really fast, before binding the event as I stated in the question.

Couldn't you help me implement this in 3.x? Not having the non-minified source makes it really difficult to reverse-engineer.

Re: How to properly check if a FeatureLayer object has been loaded?

FreddieGibson — Wed, 02 May 2018 21:57:36 GMT

Hi Samuel,

Are you able to replicate a situation where the FeatureLayer loads before the next line of code can execute to wire into the load event? If so would you be able to record a video of that and send it to me? I'd be very interested in replicating this if possible.

Re: How to properly check if a FeatureLayer object has been loaded?

SamuelAbati — Thu, 03 May 2018 17:56:13 GMT

Isn't the CodPen I linked sufficient? I just used setTimeout to wait untill the layer is loaded before binding the event.

As I mentioned, our ArcgisServer is local and sometimes the layer will load before the onLoad event is bound (if it's a small layer, or lets say the user has several tabs open making javascript a bit slow) . Its just a design flaw in my point of view, its pure Murphy's Law. This error can happen, and in my case it did.

Not trying to be rude, but I'm not sure what other proof I can provide, what I can't is post a video of my company's code

Re: How to properly check if a FeatureLayer object has been loaded?

FreddieGibson — Sat, 11 Dec 2021 14:29:07 GMT

Hi Samuel,

I do know that depending on the browser it is possible for the layer to load as soon as it's constructed, but I rarely run into this situation. My goal is to help you to be able to move forward with the use of the 3.x API. Within the documentation it does mention this scenario against DynamicMapServicesLayers, but I'm curious if you ever implement this in your workflow. Below is the documentation I'm referring to and you'll see that an emit was used to resolve this issue in the event that the layer loads faster than you're able to wire in the event.

ArcGIS API for JavaScript- Working with Events

https://developers.arcgis.com/javascript/3/jshelp/inside_events.html

In Internet Explorer, due to resource caching, the onLoad event is fired as soon as the layer is constructed. Consequently you should check whether the layer's loaded property is true before registering a listener for the "load" event:

on example:

require(["esri/layers/ArcGISDynamicMapServiceLayer", ...
], function(ArcGISDynamicMapServiceLayer, ... ) {
  var layer = new ArcGISDynamicMapServiceLayer(...);
  if(layer.loaded){
    printInitialExtent({"layer":layer});
  } else {
    layer.on("load", printInitialExtent);
  }

  function printInitialExtent(evt) {
    console.log(evt.layer.initialExtent);
  }
});

However, on has a companion function, emit. Instead of directly calling the event handler, we could have forced the event to fire using emit:

on example:

require(["esri/layers/ArcGISDynamicMapServiceLayer", ... ], function(ArcGISDynamicMapServiceLayer, ... ) {
  var layer = new ArcGISDynamicMapServiceLayer(...);
  layer.on("load", printInitialExtent);
  if(layer.loaded){
    layer.emit("load",{
      "layer":layer
    });
  }

  function printInitialExtent(evt) {
    console.log(evt.layer.initialExtent);
  }

Re: How to properly check if a FeatureLayer object has been loaded?

SamuelAbati — Thu, 03 May 2018 20:36:41 GMT

Hello and thanks for the reply.

Your first example from the documentation is exactly like my second example.

And your second example although I wasn't aware you could do that, still shares the same problem as your first example.

The layer could be loaded between the if/else or the event binding/if.

Yes I understand its very rare, call me perfectionist, but it's just not the correct flow of things. Mixing synchronous code with asynchronous code will never be the ideal solution.

If you can't help me any further that's fine, but I believe the only way is to extend the FeatureLayer class, I just don't know how because I don't have the source.

Re: How to properly check if a FeatureLayer object has been loaded?

FreddieGibson — Sat, 11 Dec 2021 14:29:10 GMT

Hi Samuel,

I do apologize for dragging this out, but I still don't quite understand how the emit would not work. If you have time I'd be more than happy to have you log a support ticket and we can discuss this in more specifics. I wrote up a sample at http://jsbin.com/tuniwel/1/edit?js,output to test out my logic. Below is the relevant JS code.

var url = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0";

require([
    "esri/map",
    "esri/layers/FeatureLayer",
    "dojo/domReady!"
  ],
  function(
    Map,
    FeatureLayer
  ) {

    // Create a map
    var map = new Map("map", {
      basemap: "hybrid",
      center: [-82.44109, 35.6122],
      zoom: 17
    });

    // Create a layer object
    var layer = new FeatureLayer(url);

    /* I'm using the timeout to force the issue to 
        occur. The application will wait 3 seconds
        before wiring in the load event. This will
        cause the load event to never fire. */
    setTimeout(function() {
      
      var msg = "using load event.";

      // Wire into the load event. 
      layer.on("load", function() {
        alert("Layer has loaded " + msg); 
      });        

      // Check if the layer has loaded. 
      /* If this is still false
         then we're certain that the event was wired before the 
         layer finished loading and we can wait for it to fire
         naturally. */
      if (!layer.loaded) { alert("Waiting on load event to fire"); }
      
      /* On the other hand, if this is true then assume that the 
          load event was wired after the layer has already loaded. 
          In this case we can force the load event to fire.
       */ 
      else {
        alert("Layer was loaded before we could finish wiring event.");

        msg = "using emit to force load event.";
        // Force the load event to fire
        layer.emit("load", {"layer":layer});
      }
      
      
    }, 3000);
  
  
    map.addLayer(layer);

});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You should note that if I specify 3000 on line 56 that 1) the layer loads before I can wire into the the load event and 2) the code is able to use emit to force the load event to fire. You should also note that if you change line 56 to zero that the load event fires as we would normally expect.

Would you be able to modify this so that we unable to get the load event to fire? If you can then I would be able to easily display this issue to our developers so that we determine how to address this issue. I do understand that at the moment you're committed to using version 3.x of the JavaScript API. Although it's a moot point, I do feel that promises would resolve this issue in 4.x as they would implement what you're wanting to add to the FeatureLayer class in 3.x.

Re: How to properly check if a FeatureLayer object has been loaded?

ReneRubalcava — Sat, 11 Dec 2021 14:29:12 GMT

I think I'm a little confused. Have you seen problems with either of these approaches?

// should be fine
const fl = new featureLayer(url);
fl.on('load', () => {
   doSomething();
})


// extra cautious method
const fl = new featureLayer(url);
if(!fl.loaded){             
    fl.on('load', () => {                    
        doSomething();                
    })
}else{                
    doSomething();
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Neither of those methods should be an issue. The initialization of the layer is synchronous, but there extra cautious way is typically used when you try to use an event listener somewhere else in your code and not immediately after creating the layer.

There should be no concerns with the two approaches above.