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

2206
2
07-08-2016 06:39 AM
IanPeebles
Regular Contributor

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

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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>

0 Kudos
IanPeebles
Regular Contributor

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.

0 Kudos