How do I have a LayerList expanded when application loads?

DanielSchatt — Thu, 14 Apr 2016 14:27:06 GMT

Hi all, I have a LayerList from a dynamic map service but only the header (layer "id" text) displays upon loading. The user must click the arrow icon on the right to expand the list and see the sublayers. I just want the LayerList to be expanded when the application loads. But apparently there's no "expanded" property to set for a LayerList. Does anyone have any idea how to do this? I asked ESRI tech support and they said there's no way to do this in the API but I find that hard to believe. See images below. Thanks!

What there is now:

What I would like:

Re: How do I have a LayerList expanded when application loads?

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:03:16 GMT

Dan,

Sure that is possible. Here is a sample:

<!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
  });

  map.addLayers([atlasLayer]);

  var llWidget = new LayerList({
     map: map,
     layers: [{
       layer: atlasLayer,
        id: "Atlas layers",
        subLayers: true
     }]
  },"layerList");
  llWidget.startup();

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

  function expandLayerList() {
    query('.esriLayer').forEach(function(node){
      domClass.add(node, "esriListExpand");
    });
    query('.esriToggleButton').forEach(function(node){
      domClass.replace(node, "esri-icon-down", "esri-icon-right");
    });
  }

});
</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: How do I have a LayerList expanded when application loads?

DanielSchatt — Thu, 14 Apr 2016 16:48:26 GMT

Perfect! Thanks Robert..

Re: How do I have a LayerList expanded when application loads?

JimNoel — Fri, 23 Jun 2017 04:48:58 GMT

Is there a way to do this in 4.3?

topic Re: How do I have a LayerList expanded when application loads? in ArcGIS JavaScript Maps SDK Questions

How do I have a LayerList expanded when application loads?

Re: How do I have a LayerList expanded when application loads?

Re: How do I have a LayerList expanded when application loads?

Re: How do I have a LayerList expanded when application loads?