Community

Hide Sublayer in Layer List TOC

2454
11
Jump to solution
10-13-2016 02:20 PM
LloydBronn
by
Occasional Contributor II
‎10-13-2016 02:20 PM

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? 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-14-2016 05:24 AM

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

View solution in original post

11 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-14-2016 05:24 AM

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
LloydBronn
by
Occasional Contributor II
‎10-17-2016 08:05 AM

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.

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-17-2016 08:12 AM

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).

0 Kudos
LloydBronn
by
Occasional Contributor II
‎10-17-2016 08:25 AM

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! 

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-17-2016 08:40 AM

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");
      }‍‍‍
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-17-2016 10:00 AM

Lloyd,

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

0 Kudos
LloydBronn
by
Occasional Contributor II
‎10-17-2016 10:39 AM

Thank you!

0 Kudos
LloydBronn
by
Occasional Contributor II
‎10-19-2016 09:53 AM

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?

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-19-2016 10:27 AM

Lloyd,

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

0 Kudos