I have an application using the layer list with legend. When the application loads, I am looking to have two of the layers automatically expanded. So far, I can get one to expand on load, but I want another layer. Here is what I have:
The code to accomplish this task is:
// Layers Widget - Choose Child to be Expanded on Load
layerList.on("load", function() {
layerList._layersNode.firstElementChild.className += " esriListExpand";
});
When the application loads, I am wanting these layers to display like the screenshot below:
I was thinking something like this, but it does not seem to work.
//layerList.on("load", function() {
// layerList._layersNode.secondElementChild.className += " esriListExpand";
//});
Does someone know of another method I can use to have both layers expanded on map load?
Thank you!
Solved! Go to Solution.
Ian,
Here is a sample showing how I would do 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 atlasLayer2 = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/911CallsHotspot/MapServer", { "id": "911CallsHotspot", "showAttribution": false }); var atlasLayer3 = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/CommunityAddressing/MapServer", { "id": "CommunityAddressing", "showAttribution": false }); map.addLayers([atlasLayer, atlasLayer2, atlasLayer3]); var llWidget = new LayerList({ map: map, layers: [{ layer: atlasLayer, id: "Atlas layers", subLayers: true },{ layer: atlasLayer2, id: "911 Calls Hotspot", subLayers: true },{ layer: atlasLayer3, id: "Community Addressing", subLayers: true }] },"layerList"); llWidget.startup(); llWidget.on('load', function(){ expandLayerList(); }); function expandLayerList() { query('.esriLayer').forEach(function(node, index){ if(index < 2){ domClass.add(node, "esriListExpand"); } }); query('.esriToggleButton').forEach(function(node, index){ if(index < 2){ 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>
Ian,
Here is a sample showing how I would do 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 atlasLayer2 = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/911CallsHotspot/MapServer", { "id": "911CallsHotspot", "showAttribution": false }); var atlasLayer3 = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/CommunityAddressing/MapServer", { "id": "CommunityAddressing", "showAttribution": false }); map.addLayers([atlasLayer, atlasLayer2, atlasLayer3]); var llWidget = new LayerList({ map: map, layers: [{ layer: atlasLayer, id: "Atlas layers", subLayers: true },{ layer: atlasLayer2, id: "911 Calls Hotspot", subLayers: true },{ layer: atlasLayer3, id: "Community Addressing", subLayers: true }] },"layerList"); llWidget.startup(); llWidget.on('load', function(){ expandLayerList(); }); function expandLayerList() { query('.esriLayer').forEach(function(node, index){ if(index < 2){ domClass.add(node, "esriListExpand"); } }); query('.esriToggleButton').forEach(function(node, index){ if(index < 2){ 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>
Thank you much Robert! Always appreciate your feedback. I found another way to do this:
This block of code also solves the issue. The childNodes have an index number:
// Layers Widget - List of Layers to Include
var layers = [
{
layer: airPhoto,
showSubLayers: false,
showLegend: false,
visibility: false
},{
layer: baseMap,
showSubLayers: true,
showLegend: true,
visibility: true
},{
layer: sewer,
showSubLayers: true,
showLegend: true,
visibility: true
},{
layer: wwlmMaintenance,
showSubLayers: true,
showLegend: true,
visibility: true,
}
];
// Layers Widget - Add List
var layerList = new LayerList({
map: map,
showLegend: true,
showSubLayers: true,
showOpacitySlider: false,
layers: layers
},"layerList");
// Layers Widget - Choose Child to be Expanded on Load [0] Indexing Number in Order
layerList.on("load", function() {
layerList._layersNode.childNodes[0].className += " esriListExpand";
layerList._layersNode.childNodes[1].className += " esriListExpand";
});
// Layers Widget - Start Up
layerList.startup();
Ian,
How to add turn on and off crime type layers. I want to add check on each type in WAB developer edition in layer list. Right now if I will check in crime type it turns on all of them, I wonder it is possible to add a check for each type? If there is any option how I will configure in WAB Developer edition. Sorry, I am new to WAB.
You could apply a definition query and add each definition individually. Or apply a filter