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

How do I have a LayerList expanded when application loads?

DanielSchatt

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:

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

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>

All comments

JimNoel

Is there a way to do this in 4.3?

DanielSchatt

Perfect! Thanks Robert..

RobertScheitlin__GISP

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>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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