layerswipe issue

LosMorales1 · ‎04-01-2015

I'm trying to user the layerswipe (JS API) widget in a map that is enclosed in a div that is on a page with many map-based divs. For some reason the layer swipe widget does not apply within the div's dimensions and essentially goes full screen. Also if there is content above the map div and below, when you move the swipe widget it disappears from the map. Scrolling down the page you'll find the swipe widget somewhere else. When I apply the same map style to the swipewidget div, it seems to shift the div to the right so that it is not in sync with the map. Just having all kinds of problems with this widget. Any help would be appreciated.

KellyHutchins · ‎04-01-2015

I can't reproduce the issue with this sample. Can you provide a code sample that shows the problem?

LosMorales1 · ‎04-01-2015

Hi, Using the LayerSwipe demo:

<!DOCTYPE HTML>

<html>

<head>

<title>Layer Swipe</title>

<style>

html, body, #map {

padding:0;

margin:0;

height:50em;

width: 80%;

border: 2px solid #a1a1a1;

border-radius: 15px;

}

</style>

require([

"esri/map",

"esri/dijit/LayerSwipe",

"esri/arcgis/utils",

"dojo/_base/array",

"dojo/domReady!"

], function(

Map, LayerSwipe, arcgisUtils, array

) {

var mapDeferred = arcgisUtils.createMap("62702544d70648e593bc05d65180fd64", "map");

mapDeferred.then(function(response){

var id;

var map = response.map;

var title = "2009 Obesity Rates";

//loop through all the operational layers in the web map

//to find the one with the specified title;

var layers = response.itemInfo.itemData.operationalLayers;

array.some(layers, function(layer){

if(layer.title === title){

id = layer.id;

if(layer.featureCollection && layer.featureCollection.layers.length){

id = layer.featureCollection.layers[0].id;

}

return true;

}else{

return false;

}

});

//get the layer from the map using the id and set it as the swipe layer.

if(id){

var swipeLayer = map.getLayer(id);

var swipeWidget = new LayerSwipe({

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

map: map,

layers: [swipeLayer]

}, "swipeDiv");

swipeWidget.startup();

}

});

</script>

</head>

<body>

</div>

<p>This is another test</p>

</body>

</html>

LosMorales1 · ‎04-01-2015

Actually this code below gives a good example of what I'm running into. Notice that when moving the swipe it actually moves down. If the screen had a lot more content and had to be scrolled vertically, the swipe widget will move down as well to the middle of the screen: