Layer not drawing on map and I need to know about it...

[TyroneBiggums]

Hi,

I have a JavaScript function that adds a list item to an un-ordered list when a layer is added to the map through the API. This function call is right after the ESRI add to map function call. This usually works. Even if the layer takes a few seconds to render, the HTML list still shows a representation of that layer.

The problem is when the layer cannot be drawn. I've jammed in bad urls for a layer that I'm adding for testing purposes. My layer shows in the HTML list but I'll get an alerted error message after a few seconds that the layer was unable to be drawn.

What I'd like to do is still add to my HTML list, but add some CSS (red strike through) to note that there was a problem with that particular layer. What's my best bet? Should I use a deferred promise on the function that adds the layer to the map so that I have a call back method to change the CSS?

I ask because I feel like I'm over thinking this. The drawing/adding of a layer on the map looks async so my other code continues and is done by the time I get the alert/error from ESRI.

[RobertScheitlin__GISP · Accepted solution]

Tyrone,

   You could just use the layer error event for this:

https://developers.arcgis.com/javascript/3/jsapi/featurelayer-amd.html#event-error 

[KenBuja]

In one of my applications, I have a list of services (Inventory.sites) to add to a map. I use the following code to test whether a URL is valid before adding the layer to the map.

        var promises = [];
        array.forEach(Inventory.sites, function (layer) {
            promises.push(testService(layer));
        });

        var allPromises = new all(promises);
        allPromises.then(function (response) {
            response.forEach(function (r) {
                if (r.resolution) {
                    var newLayer;

                    if (r.layer.type === "dynamic") {
                        newLayer = new ArcGISDynamicMapServiceLayer(r.layer.url, {
                            id: r.layer.id
                        });
                    } else {
                        newLayer = new ArcGISTiledMapServiceLayer(r.layer.url, {
                            id: r.layer.id
                        });
                    }
                    layersToAdd.push(newLayer);
                }
            });
            map.addLayers(layersToAdd);
        });


    function testService(layer) {
        var deferred = new Deferred();
        var request = new XMLHttpRequest();
        try {
            request.open("get", layer.url + "?f=json");
        }
        catch (error) {
            console.error(error);
            deferred.resolve({ layer: layer, resolution: false });
            return deferred.promise;
        }
        request.onloadend = function () {
            if (this.status !== 200) {
                console.log("Could not load " + layer.name);
                deferred.resolve({ layer: layer, resolution: false });
            } else {
                var response = JSON.parse(this.response);
                if (response.error) {
                    console.log("Could not load " + layer.name);
                    deferred.resolve({ layer: layer, resolution: false });
                } else {
                    deferred.resolve({ layer: layer, resolution: true });
                }
            }
        };
        request.send();
        return deferred.promise;
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[TyroneBiggums]

Both are real helpful answers. I marked the short and sweet answer as correct only because I went that quicker route. In my Layer.on('error') function, I added a CSS class for the HTML list item to show the failure.

Thank you both!