Is it possible to combine LayerList and LayerSwipe?

JuliaRobertson2 — Fri, 05 Aug 2016 09:57:38 GMT

I've tried, but the LayerList is stuck above the map pane. I've tried changing the LayerList pane to "region: 'trailing' " and the map pane to "region: 'leading' ", but nothing changes. I've done it with and without a border container.

Re: Is it possible to combine LayerList and LayerSwipe?

FC_Basson — Sat, 11 Dec 2021 08:15:07 GMT

Remove the data-dojo-props attribute for both dividers and change you CSS:

#layerListPane{
   width:25%;
   float:right;
}
#map{
  width: 75%;
  float:left;
}

Re: Is it possible to combine LayerList and LayerSwipe?

JuliaRobertson2 — Fri, 05 Aug 2016 11:55:43 GMT

Well that gets it in the proper place, but now it's taking up half the screen....

Re: Is it possible to combine LayerList and LayerSwipe?

FC_Basson — Sat, 11 Dec 2021 08:15:10 GMT

Here's the better solution:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Layer List Dijit</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">


<style>
html, body, .container, #map {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    margin:0;
    font-family: "Open Sans";
}
#map {
    padding:0;
}
#layerListPane{
    width:25%;
}
.esriLayer{
  background-color: #fff;
}
.esriLayerList .esriList{
    border-top:none;
}
.esriLayerList .esriTitle {
  background-color: #fff;
  border-bottom:none;
}
.esriLayerList .esriList ul{
  background-color: #fff;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.17/"></script>
<script>
require([
    "esri/arcgis/utils",
    "esri/dijit/LayerList",
    "esri/dijit/LayerSwipe",
    "dojo/_base/array",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"
], function(
    arcgisUtils,
    LayerList,LayerSwipe,
    array
) {
    //Create a map based on an ArcGIS Online web map id
    arcgisUtils.createMap("62702544d70648e593bc05d65180fd64", "map").then(function(response){
        var id;
        var map = response.map;
        var title = "2009 Obesity Rates";
       
        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;
          }
        });
       
        // layer list
        var myWidget = new LayerList({
          map: response.map,
          layers: arcgisUtils.getLayerList(response)
        },"layerList");
        myWidget.startup();
       
        //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 class="claro">
    <div class="container" data-dojo-type="dijit/layout/BorderContainer"data-dojo-props="design:'headline',gutters:false">
        <div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
            <div id="layerList"></div>
        </div>
        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
            <div id="swipeDiv"></div>
        </div>
    </div>
</body>
</html>

Re: Is it possible to combine LayerList and LayerSwipe?

deleted-user-0W0-oLHxDjCX — Thu, 17 Nov 2016 15:10:46 GMT

Does anybody has figure it out a solution in WAB?

topic Re: Is it possible to combine LayerList and LayerSwipe? in ArcGIS JavaScript Maps SDK Questions

Is it possible to combine LayerList and LayerSwipe?

Re: Is it possible to combine LayerList and LayerSwipe?

Re: Is it possible to combine LayerList and LayerSwipe?

Re: Is it possible to combine LayerList and LayerSwipe?

Re: Is it possible to combine LayerList and LayerSwipe?