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.

http://esri.github.io/arcgis-dijit-layer-swipe-js/

 

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.

 

 

HTML

 

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

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

</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>

</select>

 

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

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

 

 

Javascript

 

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

        initUrlDict();

        swipeLayer_Changed();

    }

 

    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) {

                swipeWidget.destroy();

            }

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

                map.removeLayer(swipeLayers[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);

                    layer.show();

                    swipeLayers.push(layer);

                }

                swipeWidget = new LayerSwipe({

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

                    left: swipeLeft,

                    map: map,

                    layers: swipeLayers

                }, "swipeDiv");

                swipeWidget.startup();

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

                    swipeLeft = swipeObject.left;

                })

            }

        });

    }

 

    function swipeBox_Changed(checkbox) {

        if (checkbox.checked) {

            swipeChecked = true;

            swipeLayer_Changed();

        }

        else {

            swipeChecked = false;

            swipeWidget.destroy();

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

                map.removeLayer(swipeLayers[i]);

            }

        }

        document.getElementById(checkbox.id).setAttribute("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.

 

Thanks.

Outcomes