topic Re: Legend with Visible Layers - how to modify for sublayers? in ArcGIS JavaScript Maps SDK Questions

Legend with Visible Layers - how to modify for sublayers?

CurtWalker — Thu, 12 Jul 2012 11:55:57 GMT

I'm using this tutorial to create a map with legend and checkboxes for turning layers on and off. Currently it only gives one checkbox per map service if you are using a Dynamic Map Service (which I am because I need labels and Feature Layers do not support labels).

How can I modify this code so it gives a checkbox for every sublayer in the Dynamic Map Service instead of just one checkbox that turns everything on/off?

Re: Legend with Visible Layers - how to modify for sublayers?

BrettGreenfield__DNR_ — Thu, 12 Jul 2012 12:50:41 GMT

Try this tutorial. I was trying to do what you're doing and this sample helped me put something together.

Re: Legend with Visible Layers - how to modify for sublayers?

CurtWalker — Thu, 12 Jul 2012 13:02:46 GMT

Thanks, I tried that one and it did give me a checkbox for each sublayer, but the problem is the legend doesn't update when you toggle layers on and off. It seems load once when the maps loads and never refreshes. I tired looking for another event for it to listen on that's fired when you toggle a sublayer's checkbox but I couldn't make it work. How did you do it?

Re: Legend with Visible Layers - how to modify for sublayers?

BrettGreenfield__DNR_ — Thu, 12 Jul 2012 15:15:26 GMT

Actually, I ran into that same problem! I pored over a lot of the help topics and they all claimed that the legend is supposed to update automatically when the layer visibility changed, but that never worked for me. If anyone has an answer to it, I'd love to know!

Re: Legend with Visible Layers - how to modify for sublayers?

CurtWalker — Thu, 12 Jul 2012 16:22:03 GMT

Ok, I just discovered that my legend will update if I zoom the map in or out after toggling a checkbox. Better but still not great. The user shouldn't have to do that. So whatever even is fired with the map zooms in or out is also refreshing the legend. If we can figure out what that is, or otherwise set that function to do a small zoom automatically when a checkbox is toggled, then I guess I could live with that. I'm still working on it....

Re: Legend with Visible Layers - how to modify for sublayers?

SiqiLi — Sat, 11 Dec 2021 10:14:22 GMT

To change the visibility of each individual layer of a map service, you need to work with the ArcGISDynamicMapServiceLayer.setVisibleLayers() method.

Here is a sample I put together to demonstrate how to toggle the visibility of each individual layer of a map service by using check box. Hope this helps to get you start.

<!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>Updating the legend to display visible layers</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.arcgis.utils");
      dojo.require("dijit.form.CheckBox");
     
      var map;
      var legendLayers = [];
      var legendLayer;
 
      function init() {
        var initialExtent = new esri.geometry.Extent({"xmin":-117.98,"ymin":33.95,"xmax":-116.92,"ymax":34.44,"spatialReference":{"wkid":4326}});
        map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(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 quakeLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer",{id:'quakes'});

        legendLayers.push({layer:quakeLayer,title:'Earthquakes'});
       
        var fireLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/MapServer",{id:'fire'});

        legendLayers.push({layer:fireLayer,title:"Fire"});
        dojo.connect(map,'onLayersAddResult',function(results){
          var legend = new esri.dijit.Legend({
            map:map,
            layerInfos:legendLayers
          },"legendDiv");
          legend.startup();
        });
        map.addLayers([fireLayer,quakeLayer]);

       dojo.connect(map,'onLayersAddResult',function(results){
          var layerLists=[];
          dojo.forEach(legendLayers,function(layer){     
         layerLists.push(buildLayerList(layer));
          });
          
          dojo.byId("layer_list").innerHTML = layerLists.join('');
        });
       
        dojo.connect(map, 'onLoad', function(theMap) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
      }

      function buildLayerList(layer) {
       var visible = [];
        var items = dojo.map(layer.layer.layerInfos,function(info,index){
       if (info.defaultVisibility) {
           visible.push(info.id);
       }
          return "<input type='checkbox' class='" + layer.title + "' checked='true' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label><br>";
        });
        
        layer.layer.setVisibleLayers(visible);
        return items.join(' ');
      }
      
      function updateLayerVisibility() {
       dojo.forEach(legendLayers,function(layer){   
         var inputs = dojo.query("."+ layer.title), input;
          var visible = [];
          dojo.forEach(inputs,function(input){
            if (input.checked) {
               visible.push(input.id);
            }
         });
         //if there aren't any layers visible set the array to be -1
         if(visible.length === 0){
            visible.push(-1);
         }
         layer.layer.setVisibleLayers(visible);   
        });
      }

      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="Natural Disasters" >
            <span style="padding:10px 0;" id="layer_list"></span>
            <div id="toggle" style="padding: 2px 2px;"></div>
          </div>
        </div>
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
      </div>
    </div>
  </body>
 
</html>

Re: Legend with Visible Layers - how to modify for sublayers?

SiqiLi — Sat, 11 Dec 2021 10:14:25 GMT

To change the visibility of each individual layer in the map, you need to work with the ArcGISDynamicMapServiceLayer.setVisibleLayers() method.

To change the visibility of each individual layer in the legend control, you need to work with the Legend.hideLayers property. Then follow by calling Legend.fefresh() method.

Here is a sample I put together to demonstrate how to toggle the visibility of each individual layer of a map service by using check box. The corresponding legend will auto-update itself in the legend control. Hope this helps.

<!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>Updating the legend to display visible layers</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.arcgis.utils");
      dojo.require("dijit.form.CheckBox");
     
      var map;
      var legendLayers = [];
      var legendLayer;
      var legend;
 
      function init() {
        var initialExtent = new esri.geometry.Extent({"xmin":-117.98,"ymin":33.95,"xmax":-116.92,"ymax":34.44,"spatialReference":{"wkid":4326}});
        map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(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 quakeLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer",{id:'quakes'});

        legendLayers.push({layer:quakeLayer,title:'Earthquakes'});
       
        var fireLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/MapServer",{id:'fire'});

        legendLayers.push({layer:fireLayer,title:"Fire"});
        dojo.connect(map,'onLayersAddResult',function(results){
          legend = new esri.dijit.Legend({
            map:map,
            layerInfos:legendLayers
          },"legendDiv");
          legend.startup();
        });
        map.addLayers([fireLayer,quakeLayer]);

       dojo.connect(map,'onLayersAddResult',function(results){
          var layerLists=[];
          dojo.forEach(legendLayers,function(layer){     
         layerLists.push(buildLayerList(layer));
          });
          
          dojo.byId("layer_list").innerHTML = layerLists.join('');
        });
       
        dojo.connect(map, 'onLoad', function(theMap) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
      }

      function buildLayerList(layer) {
       var visible = [];
       var hide=[];
        var items = dojo.map(layer.layer.layerInfos,function(info,index){
       if (info.defaultVisibility) 
           visible.push(info.id);
       else
              hide.push(input.id);
          return "<input type='checkbox' class='" + layer.title + "' checked='true' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label><br>";
        });
        
        layer.layer.setVisibleLayers(visible);
        legend.hidLayers=hide;
        legend.refresh();
        return items.join(' ');
      }
      
      function updateLayerVisibility() {
       dojo.forEach(legendLayers,function(layer){   
         var inputs = dojo.query("."+ layer.title), input;
          var visible = [];
          var hide=[];
          dojo.forEach(inputs,function(input){
            if (input.checked) 
               visible.push(input.id);
            else
               hide.push(input.id);
         });
         //if there aren't any layers visible set the array to be -1
         if(visible.length === 0){
            visible.push(-1);
         }
         layer.layer.setVisibleLayers(visible);  
         legend.hidLayers=hide;
         legend.refresh();
         
        });
      }

      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="Natural Disasters" >
            <span style="padding:10px 0;" id="layer_list"></span>
            <div id="toggle" style="padding: 2px 2px;"></div>
          </div>
        </div>
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
      </div>
    </div>
  </body>
 
</html>

Re: Legend with Visible Layers - how to modify for sublayers?

CurtWalker — Thu, 12 Jul 2012 18:40:12 GMT

Shuping,

Thanks for the code. It does as you say and adds checkboxes for all sublayers. But did you notice that the legend is tripled? It puts the same layers in the legend three times in a row. I think this is a step in the right direction regarding the checkboxes though.

Re: Legend with Visible Layers - how to modify for sublayers?

SiqiLi — Thu, 12 Jul 2012 19:11:41 GMT

Shuping,

Thanks for the code. It does as you say and adds checkboxes for all sublayers. But did you notice that the legend is tripled? It puts the same layers in the legend three times in a row. I think this is a step in the right direction regarding the checkboxes though.

I tested my sample again, however I don't see the tripled legend issue. It runs correctly in both Firefox, Chrome, and IE. Please see the attached screenshot 1->2->3->4.

[ATTACH=CONFIG]16035[/ATTACH]
[ATTACH=CONFIG]16036[/ATTACH]
[ATTACH=CONFIG]16037[/ATTACH]
[ATTACH=CONFIG]16038[/ATTACH]

Please feel free to let me know if I overlooked any detail. Thanks.

Re: Legend with Visible Layers - how to modify for sublayers?

CurtWalker — Fri, 13 Jul 2012 13:22:34 GMT

That's really weird. I just tried your code again to make sure. I pasted your code into a fresh document and hit it with IE and FF. In FF the legend appears normal, but in IE9 I get the tripled legend. Here's a screenshot.

[ATTACH=CONFIG]16063[/ATTACH]

Re: Legend with Visible Layers - how to modify for sublayers?

SiqiLi — Fri, 13 Jul 2012 13:49:48 GMT

That's really weird. I just tried your code again to make sure. I pasted your code into a fresh document and hit it with IE and FF. In FF the legend appears normal, but in IE9 I get the tripled legend.

Umm....My IE9 works fine with it. Try to clear the browser cache to see if it helps.

Hey Curt,
Update: I found tripled legend issue is reproducible in 32-bit IE. The issue is caused by the unnecessary call of "legend.refresh();" in the "buildLayerList()" function. Go ahead and remove it. The app shall runs correctly this time.

[ATTACH=CONFIG]16065[/ATTACH]

Re: Legend with Visible Layers - how to modify for sublayers?

SiqiLi — Fri, 13 Jul 2012 23:32:07 GMT

To change the visibility of each individual layer in the map, you need to work with the ArcGISDynamicMapServiceLayer.setVisibleLayers() method.

To change the visibility of each individual layer in the legend control, you need to work with the Legend.hideLayers property. Then follow by calling Legend.fefresh() method.

Update: I tested again and found there seems no need to use the Legend.hideLayers property. The legend control knows which layer has changed its visibility. Attached is the updated sample.

Correct: In the #6 post, code lines #92 and #113 have spell errors. They should be "legend.hideLayers=hide;". I missed the "e". Sorry. 🙂

Re: Legend with Visible Layers - how to modify for sublayers?

PramodHarithsa1 — Mon, 16 Jul 2012 12:18:00 GMT

Update: I tested again and found there seems no need to use the Legend.hideLayers property. The legend control knows which layer has changed its visibility. Attached is the updated sample.

Correct: In the #6 post, code lines #92 and #113 have spell errors. They should be "legend.hid eLayers=hide;". I missed the " e". Sorry. 🙂

Hi Shuping,

The code works fine with the esri sample server, but when i replace it with my map service neither the TOC nor the legend gets created.
I am interested only in TOC though.
Am i missing anything here?

Re: Legend with Visible Layers - how to modify for sublayers?

CurtWalker — Mon, 16 Jul 2012 13:02:11 GMT

Update: I tested again and found there seems no need to use the Legend.hideLayers property. The legend control knows which layer has changed its visibility. Attached is the updated sample.

Correct: In the #6 post, code lines #92 and #113 have spell errors. They should be "legend.hid eLayers=hide;". I missed the " e". Sorry. 🙂

Thanks, that did fix the triple legend issue for me. But, when I have pulled in my own map service it does not show up in the table of contents with checkboxes. It does however appear in the legend. I"m not sure what's keeping it from working in the TOC.

Re: Legend with Visible Layers - how to modify for sublayers?

SiqiLi — Mon, 16 Jul 2012 13:43:03 GMT

Hi Shuping,

The code works fine with the esri sample server, but when i replace it with my map service neither the TOC nor the legend gets created.
I am interested only in TOC though.
Am i missing anything here?

Are you working with ArcGIS 10.0 or newer map service? If it is a 10.0 SP1 or newer map service, you can check its legend resource directly at the REST endpoint via URL: http://<mapservice-url>/legend

e.g. http://sampleserver4.arcgisonline.com/ArcGIS/rest/services/Elevation/ESRI_Elevation_World/MapServer/legend

Does yours legend show up at the REST endpoint?

Re: Legend with Visible Layers - how to modify for sublayers?

SiqiLi — Sat, 11 Dec 2021 10:14:28 GMT

Thanks, that did fix the triple legend issue for me. But, when I have pulled in my own map service it does not show up in the table of contents with checkboxes. It does however appear in the legend. I"m not sure what's keeping it from working in the TOC.

I add the checkboxes to the "dojo.byId("layer_list").innerHTML". So, it depends on where the "layer_list" element is defined in the HTML, in the TOC or Legend ContentPane.

<div dojoType="dijit.layout.ContentPane" title="TOC" >
            <span style="padding:10px 0;" id="layer_list"></span>
            <div id="toggle" style="padding: 2px 2px;"></div>
          </div>

Re: Legend with Visible Layers - how to modify for sublayers?

CurtWalker — Mon, 16 Jul 2012 18:33:31 GMT

Are you working with ArcGIS 10.0 or newer map service? If it is a 10.0 SP1 or newer map service, you can check its legend resource directly at the REST endpoint via URL: http://<mapservice-url>/legend

e.g. http://sampleserver4.arcgisonline.com/ArcGIS/rest/services/Elevation/ESRI_Elevation_World/MapServer/legend

Does yours legend show up at the REST endpoint?

Yes it sure does.

https://map.entrix.com/ArcGIS/rest/services/07856001/titan_working_20111220_acw/MapServer/legend

Re: Legend with Visible Layers - how to modify for sublayers?

CurtWalker — Mon, 16 Jul 2012 18:43:44 GMT

I don't understand it. If I copy and paste your code into a fresh document and hit it in a browser, I get a webmap with the ESRI layers and both Legend and TOC work just fine. Then the only thing I change is to paste the URL for my map service in place of the quakes layer, and refresh. The map loads, the data displays, and the legend populates, but the checkboxes for the TOC are gone. It won't even show the checkboxes for the other ESRI sublayers. What is it about my map service that breaks the TOC?

http://map.entrix.com/ArcGIS/rest/services/07856001/titan_working_20111220_acw/MapServer

Re: Legend with Visible Layers - how to modify for sublayers?

SiqiLi — Tue, 17 Jul 2012 12:37:12 GMT

I don't understand it. If I copy and paste your code into a fresh document and hit it in a browser, I get a webmap with the ESRI layers and both Legend and TOC work just fine. Then the only thing I change is to paste the URL for my map service in place of the quakes layer, and refresh. The map loads, the data displays, and the legend populates, but the checkboxes for the TOC are gone. It won't even show the checkboxes for the other ESRI sublayers. What is it about my map service that breaks the TOC?

http://map.entrix.com/ArcGIS/rest/services/07856001/titan_working_20111220_acw/MapServer

Try this one:

Re: Legend with Visible Layers - how to modify for sublayers?

CurtWalker — Mon, 23 Jul 2012 16:01:06 GMT

Shuping,

Thanks for the new code. The legend is now working with my service, thanks. However, when the map loads only two layers are visible on the map and in the legend, yet all of the checkboxes in the TOC are checked. If I uncheck one of them it fires the functions and suddenly all the other layers appear all at once, both in the map and in the legend.

It's very close! Just this last bug and it'll will be perfect. Thanks for your help. Any ideas?