transparent.png "Kathleen_Crombez"){kind=avatar}
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);
}
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.
Accepted Solutions
