Layer Swipe Slide Bar / Slide Handle Not Displaying

Kathleen_Crombez — Thu, 17 Dec 2015 22:02:39 GMT

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>

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

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

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

}

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], "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);

}

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.

Re: Layer Swipe Slide Bar / Slide Handle Not Displaying

Kathleen_Crombez — Thu, 17 Dec 2015 22:24:38 GMT

Well...

I don't know what caused the sudden issue.

But I found a work around to the div being deleted.

I simply create a div dynamically to attach the layer swipe widget to. (in bold below).I also found that the swipeWidget.on("swipe") always returns 0 for left, so I removed that.

Here is the new function.

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

}

swipeLayers = [];

// initiate the swipe tool

if (swipeChecked) {

var swipeContainer = document.getElementById("swipeContainer");

if (!swipeContainer) {

swipeContainer = document.createElement("div");

swipeContainer.id = "swipeContainer";

var swipeDiv = document.getElementById("swipeDiv");

swipeDiv.appendChild(swipeContainer);

}

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

var urls = urlDict[swipeLayer];

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

var layer = initImageLayer(ArcGISImageServiceLayer, urlDict[swipeLayer], "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: 155,

map: map,

layers: swipeLayers

}, "swipeContainer");

swipeWidget.startup();

}

});

}

topic Layer Swipe Slide Bar / Slide Handle Not Displaying in ArcGIS JavaScript Maps SDK Questions

Layer Swipe Slide Bar / Slide Handle Not Displaying

Re: Layer Swipe Slide Bar / Slide Handle Not Displaying