layerswipe issue

4589
5
04-01-2015 07:17 AM
LosMorales1
New Contributor

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.

full page.png

0 Kudos
5 Replies
KellyHutchins
Esri Frequent Contributor

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

0 Kudos
LosMorales1
New Contributor

Hi, Using the LayerSwipe demo:

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

  <title>Layer Swipe</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">

  <style>

    html, body, #map {

      padding:0;

      margin:0;

      height:50em;

      width: 80%;

  border: 2px solid #a1a1a1;

  border-radius: 15px;     

    }

  </style>

  <script src="//js.arcgis.com/3.13/"></script>

  <script>

    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 id="map" class="map">

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

  </div>

  <p>This is another test</p>

</body>

</html>

0 Kudos
LosMorales1
New Contributor

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:

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

  <title>Layer Swipe</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">

  <style>

    #map {

      padding:0;

      margin:0;

      height:50em;

      width: 80%;

  border: 2px solid #a1a1a1;

  border-radius: 15px;     

    }

  </style>

  <script src="//js.arcgis.com/3.13/"></script>

  <script>

    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>

  <p>This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test</p>

    <div id="map" class="map">

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

  </div>

  <p>This is another test</p>

</body>

</html>

0 Kudos
KellyHutchins
Esri Frequent Contributor

This looks like a bug. Can you report this issue to Esri Support?

0 Kudos
BruceRalston
New Contributor II

I can reproduce this intermittently with the sample running in the sandbox.  Simply make the map div to be less than the full screen.  Most of the time the swipe will exceed the map.  Once in a while it will behave correctly.  Definitely seems like a bug.

0 Kudos