Layer List Widget - Can the Sublayers and Legend Be Switched Around?

IanPeebles — Fri, 08 Jul 2016 13:39:18 GMT

I have been working with the layer list widget and I really like it. It is being used in several applications. One thing I have noticed is that the sublayers appear before the legend by default. is there a way to switch the order around?

Just curious if this is possible. Thank you for any input.

Ian

Re: Layer List Widget - Can the Sublayers and Legend Be Switched Around?

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:24:44 GMT

Ian,

Sure here is a sample that does just that:

<!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.16/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/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.16/"></script>
<script>
require([
    "esri/map",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/dijit/LayerList",
    "dojo/query",
    "dojo/dom-class",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"
], function(
    Map,
    ArcGISDynamicMapServiceLayer,
    LayerList,
    query,
    domClass
) {
  var map = new Map("map", {
    basemap: "topo",
    center: [-123, 47],
    zoom: 8,
    sliderStyle: "small"
  });

  var atlasLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", {
    "id": "atlasLayer",
    "showAttribution": false
  });

  var recreationLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Recreation/MapServer", {
    "id": "recreationLayer",
    "showAttribution": false
  });

  var waterNetLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer", {
    "id": "waterNetworkLayer",
    "showAttribution": false
  })

  map.addLayers([atlasLayer, recreationLayer, waterNetLayer]);

  var llWidget = new LayerList({
     map: map,
     layers: [{
       layer: atlasLayer,
        id: "Atlas layers",
        subLayers: true
     },
     {
       layer: recreationLayer,
        id: "Recreation layers",
        subLayers: true
     },
     {
       layer: waterNetLayer,
        id: "Water Network layers",
        subLayers: true
     }],
     showSubLayers: true,
     showOpacitySlider: true,
     showLegend: true
  },"layerList");
  llWidget.startup();

  llWidget.on('load', function(){
    expandLayerList();
  });

  function expandLayerList() {
    query('.esriTabMenu').forEach(function(node){
      //console.info(node);
      var nEntry = node.getElementsByTagName('li');
      //console.info(nEntry);
      var nEntryArray = Array.prototype.slice.call(nEntry, 0);
      //console.info(nEntryArray);
      var sublayers = nEntryArray.shift();
      nEntryArray.splice(1,0,sublayers);

      while (node.lastChild){
        node.removeChild(node.lastChild);
      }

      for (i=0; i<nEntryArray.length; i++){
        node.appendChild(nEntryArray);
      }
    });

    //This first part will expand the main layers.
    query('.esriLayer').forEach(function(node){
      domClass.add(node, "esriListExpand");
    });
    query('.esriToggleButton').forEach(function(node){
      domClass.replace(node, "esri-icon-down", "esri-icon-right");
    });
    //This part will collapse the sublayer lists
    query('.esriSubListLayer.esriHasSubList.esriSubListExpand.esriListVisible').forEach(function(node){
      //console.info(node);
      domClass.remove(node, "esriSubListExpand");
      domClass.remove(node, "esriListVisible");
    });
  }

});
</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>
</div>
</body>
</html>

Re: Layer List Widget - Can the Sublayers and Legend Be Switched Around?

IanPeebles — Fri, 08 Jul 2016 19:41:13 GMT

Thank you Much Robert! I did look at the sample and the ordering is how I want. I now just need to study the code to see how to re-arrange the order, but the sample you provided does just that.

topic Re: Layer List Widget - Can the Sublayers and Legend Be Switched Around? in ArcGIS JavaScript Maps SDK Questions

Layer List Widget - Can the Sublayers and Legend Be Switched Around?

Re: Layer List Widget - Can the Sublayers and Legend Be Switched Around?

Re: Layer List Widget - Can the Sublayers and Legend Be Switched Around?