nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Is it possible to combine LayerList and LayerSwipe?

JuliaRobertson2

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.

LayerList&Swipe.PNG

LayerList&Swipe.html.zip

Untitled.png

2025-01-10_16h12_44.png

Vind meer berichten getagd met

Accepted answers

FC_Basson

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>

All comments

FC_Basson

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

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

JuliaRobertson2

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

LayerList&Swipe2.PNG

FC_Basson

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>

deleted-user-0W0-oLHxDjCX

Does anybody has figure it out a solution in WAB?

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.