topic Re: Hide Sublayer in Layer List TOC in ArcGIS JavaScript Maps SDK Questions

Hide Sublayer in Layer List TOC

LloydBronn — Thu, 13 Oct 2016 21:20:49 GMT

I have a group layer from a dynamic map service. Right now I have it set to showsubLayers: true under the layerlist function. I want to exclude one of the sublayers from this. It's a mask that I want to always be on and not be visible in the list. Is this possible?

Re: Hide Sublayer in Layer List TOC

RobertScheitlin__GISP — Sat, 11 Dec 2021 21:06:20 GMT

Lloyd,

Sure you can with some dom manipulation:

<!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.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/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.17/"></script>
<script>
require([
    "esri/map",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/dijit/LayerList",
    "dojo/query",
    "dojo/dom-class",
    "dojo/dom-style",
    "dojo/NodeList-traverse",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"
], function(
    Map,
    ArcGISDynamicMapServiceLayer,
    LayerList,
    query,
    domClass,
    domStyle
) {
  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() {
  //This is where you find your sub layer and hide it
    query('.esriSubList > .esriSubListLayer > .esriTitle > .esriTitleContainer > .esriLabel').forEach(function(node, index){
      if(node.innerHTML === "Output_Features"){
        domStyle.set(node.parentNode.parentNode.parentNode, "display", "none");
      }
    });

    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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Hide Sublayer in Layer List TOC

LloydBronn — Mon, 17 Oct 2016 15:05:27 GMT

OK. I'm looking at your example here. Is it only possible to gray the layers out like this? I don't want it to be visible in the TOC at all.

Re: Hide Sublayer in Layer List TOC

RobertScheitlin__GISP — Mon, 17 Oct 2016 15:12:02 GMT

Lloyd,

I am not sure why you are thinking that it is graying out the layer when it is changing the css display mode to none (which means it is removed from the display).

Re: Hide Sublayer in Layer List TOC

LloydBronn — Mon, 17 Oct 2016 15:25:28 GMT

I just opened your example code here in a browser and some of the layers are greyed out. I'll add this into my code and check it out. Thanks!

Re: Hide Sublayer in Layer List TOC

RobertScheitlin__GISP — Sat, 11 Dec 2021 21:06:23 GMT

Lloyd,

That is built in functionality to show scale dependency for that layer.

These lines hide the layer:

      if(node.innerHTML === "Output_Features"){
        domStyle.set(node.parentNode.parentNode.parentNode, "display", "none");
      }‍‍‍

Re: Hide Sublayer in Layer List TOC

RobertScheitlin__GISP — Mon, 17 Oct 2016 17:00:48 GMT

Lloyd,

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

Re: Hide Sublayer in Layer List TOC

LloydBronn — Mon, 17 Oct 2016 17:39:51 GMT

Thank you!

Re: Hide Sublayer in Layer List TOC

LloydBronn — Wed, 19 Oct 2016 16:53:42 GMT

One more question about this. The layer is successfully hidden in the layer list, but it still shows up in the legend. Is there a way to hide it there as well?

Re: Hide Sublayer in Layer List TOC

RobertScheitlin__GISP — Wed, 19 Oct 2016 17:27:38 GMT

Lloyd,

As this is a whole other question you should start a new thread.

Re: Hide Sublayer in Layer List TOC

EllaHaines — Thu, 02 Aug 2018 18:12:24 GMT

Is there no better solution now, in 2018, perhaps using DynamicLayerInfos?

I'm trying this with no luck(attempting to remove layer 0 from the sublayers in the LayerList):

dynamicLayerInfos = [
new DynamicLayerInfo({ id: -1, subLayerIds: [1,2,3,4,5]}),
new DynamicLayerInfo({ id: 1 }),
new DynamicLayerInfo({ id: 2 }),
new DynamicLayerInfo({ id: 3 }),
new DynamicLayerInfo({ id: 4 }),
new DynamicLayerInfo({ id: 5 })
];
dynamicMapServiceLayer.setDynamicLayerInfos(dynamicLayerInfos);

Having to resort to DOM manipulation is really kind of awful.

Re: Hide Sublayer in Layer List TOC

ToddFagin — Fri, 21 Sep 2018 17:45:52 GMT

I was trying to remove a graphic layer from the layer list in 4.8 and found this, in particular the comment from Kristian Ekenes. I slightly modified her code to my needs and it worked. Hopefully this is still relevant to you almost two months after your post.

//Hide graphic layer from layerList
        var graphicCurrentLayer = view.map.layers.flatten(function(item){
          return item.layers;
       }).find(function(layer){
          return layer.title === "Graphics Layer";
       });

       graphicCurrentLayer.listMode = "hide";