AnsweredAssumed Answered

Layer Swipe Slide Bar / Slide Handle Not Displaying

Question asked by crombezk on Dec 17, 2015
Latest reply on Dec 17, 2015 by crombezk

I am wondering if something changed on the layer swipe widget today?


Yesterday everything was working fine. But today I am experiencing the following issue.


When I initialize the map I call a function to create the layer swipe widget.

It loads and everything works fine.


But I have a check box to toggle the swipe tool and a drop down list to select the swipe layer.

When either of these are used I call the destroy() method on the widget and create a new widget using the exact same function that creates it in the map initialization.


When the startup() method is called this time the slider bar and slider handle is missing.


I thought it might have been something I changed that messed it up. But then I noticed the esri sample was experiencing the same issue.


The weird thing is... The layer loads and is positioned correctly and I see the widget is created in Firebug.



The other weird thing is when I call destroy(), it removes my swipe div from the dom.


swipe widget is there on map load.


swipe widget (and hard coded div) are gone after destroy() / startup() sequence.





<div id="map" class="tundra" style="overflow: hidden;">

     <div id="swipeDiv"></div>



<label for="swipeLayer">Swipe Layer:</label>

<select id="swipeLayer" style="width: 110px;" onchange="swipeLayer_Changed();">

     <option value="CO2014" selected="selected">2014 Aerial</option>

     <option value="CO2011">2011 Aerial</option>

     <option value="CO2008">2008 Aerial</option>

     <option value="CO2005">2005 Aerial</option>

     <option value="CO2002">2002 Aerial</option>

     <option value="CO1988">1988 Aerial</option>

     <option value="CO1973">1973 Aerial</option>



<input id="swipeBox" type="checkbox" checked="checked" aria-checked="true" onchange="swipeBox_Changed(this);" />

<label for="swipeBox">Swipe Aerial Image</label>





    var swipeLeft = 200;

    var swipeIndex;

    var swipeLayers = [];

    var swipeWidget;

    var imageDict = {};

    var urlDict = {};


    var swipeChecked = true; // used in print function to hide swipe layer


    function initImageDict() { // called in mapinit

        imageDict["CO2014"] = [CO2014LO];

        imageDict["CO2011"] = [CO2011HI, CO2011LO];

        imageDict["CO2008"] = [CO2008HI, CO2008LO];

        imageDict["CO2005"] = [CO2005HI, CO2005LO];

        imageDict["CO2002"] = [CO2002HI, CO2002LO];

        imageDict["CO1988"] = [CO1988HI, CO1988LO];

        imageDict["CO1973"] = [CO1973HI, CO1973LO];





    function initUrlDict() {

        urlDict["CO2014"] = [CO2014LO_url];

        urlDict["CO2011"] = [CO2011HI_url, CO2011LO_url];

        urlDict["CO2008"] = [CO2008HI_url, CO2008LO_url];

        urlDict["CO2005"] = [CO2005HI_url, CO2005LO_url];

        urlDict["CO2002"] = [CO2002HI_url, CO2002LO_url];

        urlDict["CO1988"] = [CO1988HI_url, CO1988LO_url];

        urlDict["CO1973"] = [CO1973HI_url, CO1973LO_url];



    function swipeLayer_Changed() {

        require(["esri/dijit/LayerSwipe", "esri/layers/ArcGISImageServiceLayer"

        ], function (LayerSwipe, ArcGISImageServiceLayer) {

            if (swipeWidget) {



            for (var i = 0; i < swipeLayers.length; i++) {



            swipeLayers = [];

            // initiate the swipe tool

            if (swipeChecked) {

                var swipeLayer = document.getElementById("swipeLayer").value;

                var urls = urlDict[swipeLayer];

                for (var i = 0; i < urls.length; i++) {

                    var layer = initImageLayer(ArcGISImageServiceLayer, urlDict[swipeLayer][i], "swipe" + String(i), 1.0);

                    map.reorderLayer(layer, swipeIndex + i);




                swipeWidget = new LayerSwipe({

                    type: "vertical",  //Try switching to "scope" or "horizontal"

                    left: swipeLeft,

                    map: map,

                    layers: swipeLayers

                }, "swipeDiv");


                swipeWidget.on("swipe", function (swipeObject) {

                    swipeLeft = swipeObject.left;






    function swipeBox_Changed(checkbox) {

        if (checkbox.checked) {

            swipeChecked = true;



        else {

            swipeChecked = false;


            for (var i = 0; i < swipeLayers.length; i++) {




        document.getElementById("aria-checked", checkbox.checked);



Has any one else been experiencing this behavior? I had it working perfectly yesterday. And all I did today was add some aria labels.

Maybe I have a syntax error and I am just over looking it.