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

Exclude sublayer from Legend

ZahidChaudhry

Is it possible to exclude a sublayer from Legend (using Legend Dijit)?

Find more posts tagged with

Accepted answers

derekswingley1

It's possible and was introduced at 3.0. We are missing info on specifically how to do this in the docs but we'll get it in there. Here's a modified version of our basic legend widget sample that shows this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Map with legend</title> 
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css"> 
    <style> 
      html, body { height: 98%; width: 98%; margin: 0; padding: 5px; }
      #rightPane{
        width:20%;
      }
      #legendPane{
        border: solid #97DCF2 1px;
      }
     
    </style> 
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script> 
    <script type="text/javascript"> 
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Legend");
      dojo.require("esri.layers.FeatureLayer");
      
      var map;

 
      function init() {
        var initialExtent = new esri.geometry.Extent({"xmin":-10753431,"ymin":4624151,"xmax":-10737799,"ymax":4635884,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", { extent: initialExtent});
        
        //Add the terrain service to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        var watershed = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer");

        var waterbodies = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/0", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });
        
        //add the legend
        dojo.connect(map, "onLayersAddResult", function(results){
          console.log("results: ", results);
          var layerInfos = dojo.map(results, function(r) {
            var li = {
              defaultSymbol: false,
              layer: r.layer
            };
            if ( r.layer.hasOwnProperty("name") ) { // feature layer
              li.title = r.layer.name;
            } else { // dynamic layer
              // hide the waterbodies layer as it's added as a feature layer
              li.hideLayers = [0];
            }
            return li;
          });

          var legendDijit = new esri.dijit.Legend({
            map: map,
            layerInfos: layerInfos
          },"legendDiv");
          legendDijit.startup();
        });
       
        map.addLayers([waterbodies, watershed]);


        dojo.connect(map, 'onLoad', function(theMap) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
      }
 
      dojo.addOnLoad(init);
    </script> 
  </head> 
  
  <body class="claro"> 
    <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;"> 
      <div id="rightPane" dojotype="dijit.layout.ContentPane" region="right">
        <div dojoType="dijit.layout.AccordionContainer">
          <div dojoType="dijit.layout.ContentPane" id="legendPane" title="Legend" selected="true" >
            <div id="legendDiv"></div>
          </div>
          <div dojoType="dijit.layout.ContentPane" title="Pane 2" >
            This pane could contain tools or additional content
          </div>
        </div>
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;"> 
      </div> 
    </div> 
  </body> 
 
</html>

The key thing to note is on line 61. The layerInfo object for a layer has a new property defined called "hideLayers". This property is an array of integers. Each integer in the array corresponds to a layer index in a dynamic map service. If a layer's index is present in the hideLayers array, it is not shown in the legend.

All comments

Mr_Kirkwood

Ok, i have a backwards question:

How "DO" i include the sublayers in the legend?

here is my code bringing in the layer that has the sublayers:

-----Layer: ImprovementsAll (ID: 17)

Sub Layers:

ImprovementsStanding

ImprovementsNoStatus

ImprovementsConstruction

ImprovementsMaintained

ImprovementsPaved

ImprovementsPlanning

ImprovementsRemoved

ImprovementsSold

ImprovementsUnpaved

Name: ImprovementsAll

Display Field:

Type: Group Layer

//add the improvement data

buildingsLayer = new FeatureLayer(getUrlKlondike("ImprovementsAll"), {

mode: FeatureLayer.MODE_ONDEMAND,

id: 'ImprovementsAll',

visible: true,

infoTemplate: template1,

outFields: ["*"]

});

legendLayers.push({layer: buildingsLayer, title: 'Improvements:'});

when i add the buildingsLayer to:

map.addLayers([easementsLayer, easementsSelectLayer, disposalsLayer,buildingsLayer]};

it makes it so no layers are visible and the map hangs up. Any help would be greatly appreciated. Thanks!

adrian.marsden_DevonCC

Is it possible to also exclude the map service name?

ACM

Edit - OK - seen the title property in the reference.

adrian.marsden_DevonCC

works a treat - many thanks

derekswingley1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Map with legend</title> 
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css"> 
    <style> 
      html, body { height: 98%; width: 98%; margin: 0; padding: 5px; }
      #rightPane{
        width:20%;
      }
      #legendPane{
        border: solid #97DCF2 1px;
      }
     
    </style> 
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script> 
    <script type="text/javascript"> 
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Legend");
      dojo.require("esri.layers.FeatureLayer");
      
      var map;

 
      function init() {
        var initialExtent = new esri.geometry.Extent({"xmin":-10753431,"ymin":4624151,"xmax":-10737799,"ymax":4635884,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", { extent: initialExtent});
        
        //Add the terrain service to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        var watershed = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer");

        var waterbodies = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/0", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });
        
        //add the legend
        dojo.connect(map, "onLayersAddResult", function(results){
          console.log("results: ", results);
          var layerInfos = dojo.map(results, function(r) {
            var li = {
              defaultSymbol: false,
              layer: r.layer
            };
            if ( r.layer.hasOwnProperty("name") ) { // feature layer
              li.title = r.layer.name;
            } else { // dynamic layer
              // hide the waterbodies layer as it's added as a feature layer
              li.hideLayers = [0];
            }
            return li;
          });

          var legendDijit = new esri.dijit.Legend({
            map: map,
            layerInfos: layerInfos
          },"legendDiv");
          legendDijit.startup();
        });
       
        map.addLayers([waterbodies, watershed]);


        dojo.connect(map, 'onLoad', function(theMap) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
      }
 
      dojo.addOnLoad(init);
    </script> 
  </head> 
  
  <body class="claro"> 
    <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;"> 
      <div id="rightPane" dojotype="dijit.layout.ContentPane" region="right">
        <div dojoType="dijit.layout.AccordionContainer">
          <div dojoType="dijit.layout.ContentPane" id="legendPane" title="Legend" selected="true" >
            <div id="legendDiv"></div>
          </div>
          <div dojoType="dijit.layout.ContentPane" title="Pane 2" >
            This pane could contain tools or additional content
          </div>
        </div>
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;"> 
      </div> 
    </div> 
  </body> 
 
</html>

adrian.marsden_DevonCC

I'd like to know this as well? Anyone? Or shall we log it as as idea?

ACM

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.