LayerSwipe::Invalid layer type?

[RochelleWolfe]

Hello I am adding a LayerSwipe to my website, and get this error: LayerSwipe::Invalid layer type

The layers displayed in the map currently are featureLayers.

Here's the bit of code that I think it ties to

      var layerIds = currentMap.layerIds;

      console.log(layerIds);                                  // displays ["layer0", "layer1"]

      var layer = layerIds[1];

      console.log(layer);                                     // displays layer1

      var swipeWidget = new LayerSwipe ({

            type: "vertical",

            map: currentMap,

            layers: [layer]

      }, "swipeWidgetId");

      swipeWidget.startup();

When ran I get this error: LayerSwipe::Invalid layer type

Any advice for solving this will be greatly appreciated, as I feel I am so close to bringing this functionality to my website. Thanks very much!

[BenElan]

Did you include the module in the require and function arguments?

require(["esri/dijit/LayerSwipe"], function(LayerSwipe) { /* code goes here */ });

[Noah-Sager · Accepted solution]

I think the issue is related to the fact that the LayerSwipe dijit expects a specific layer type, of which FeatureLayer is not a valid option.

Looking at the sample:

ArcGIS API for JavaScript Sandbox 

If you inspect the "swipeLayer" object at line 53 (for example adding a console state below)

console.log ("swipeLayer: ", swipeLayer)

You see it references a MapServer, which makes sense when we look at the layer property of the LayerSwipe dijit:

LayerSwipe | API Reference | ArcGIS API for JavaScript 3.29 

Which expects an array of Layer:

Layer | API Reference | ArcGIS API for JavaScript 3.29 

Which expects a URL to the ArcGIS Server REST resource that represents a map service

Layer | API Reference | ArcGIS API for JavaScript 3.29 

[BenElan]

You can add the layer like this:

require(["esri/layers/DynamicMapServiceLayer"], function(DynamicMapServiceLayer) {
//...
var layer = new ArcGISDynamicMapServiceLayer("https://gis.davey.com/arcgis/rest/services/BloomingtonIN/BloomintonIN/MapServer");

map.addLayer(layer);
//...
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[BenElan]

In the example, they are just using layerId to get the layers

var swipeLayer = map.getLayer(id);‍

So try defining the layer like below instead of using the layer Ids

var layer = new ArcGISDynamicMapServiceLayer("https://gis.davey.com/arcgis/rest/services/BloomingtonIN/BloomintonIN/MapServer");‍

var swipeWidget = new LayerSwipe ({
    type: "vertical",
    map: currentMap,
    layers: [layer]
}, "swipeWidgetId");
swipeWidget.startup();‍‍‍‍‍‍‍‍

[BenElan]

Try this 

var swipeWidget = new LayerSwipe({
 type: "vertical",
 map: currentMap,
 layers: [newLayer]
 }, currentMap.swipeWidgetID);
 swipeWidget.startup();‍‍‍‍‍‍

delete this

var layerIds = currentMap.layerIds;
console.log(layerIds);       //["layer0", "CouncilDistricts", "Fragmentation", "layer1"]
var layer = layerIds[2];
console.log(layer);          //Fragmentation

var wholeLayer = currentMap.getLayer(layer);
console.log(wholeLayer);    // the whole ArcGISDynamicMapServiceLayer with 1 visible layer
‍‍‍‍‍‍‍

And no problem, glad to help.

[RochelleWolfe]

Thank you very much for all of your help! I have a slider now and am rejoicing! 

Here is a codepen that I hope will help other people.

I found that featureLayers work just fine, but ArcGUSDynamicMapServiceLayers require "layer._div = map.root" even though I don't understand what this does.

https://codepen.io/RochelleWolfe/pen/YmLKYG