Legend TOC checkboxes not working

CurtWalker · ‎05-03-2012

I have built a web-map using this sample code and I cannot figure out why the TOC doesn't work in my webmap. The Legend loads properly but the TOC with checkboxes does not. Here's my code. What am I missing?

<!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>Cardno Web-Mapping</title>

 <!-- Add ESRI style -->
 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">

 <!-- Add Custom style -->
 <link rel="stylesheet" type="text/css" href="cardno.css">
 
 <!-- Required for dijits -->
 <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>

 <!-- Add ESRI Javascript API -->
 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>

 <script type="text/javascript">
  // Add Dojo elements
  dojo.require("dijit.dijit");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.AccordionContainer");
  dojo.require("dijit.TitlePane");
  dojo.require("dojo.parser");
  dojo.require("esri.map");
  dojo.require("esri.dijit.Legend");
  dojo.require("esri.dijit.Measurement");
  dojo.require("esri.SnappingManager");
  dojo.require("esri.arcgis.utils");
  dojo.require("dijit.form.CheckBox");
  
  var map;
  var legendLayers = [];
  
  function init() {
   // Set initial extent
            var startExtent = new esri.geometry.Extent(-115.489, 42.973, -115.317, 43.066, new esri.SpatialReference({wkid:4326}) );
    
            // Create map
            map = new esri.Map("map", { extent: startExtent });

            // Add base layer
            var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"); 
            map.addLayer(basemap);
            
            // Setup Dynamic layer
            var projLayers = new esri.layers.ArcGISDynamicMapServiceLayer("http://map.entrix.com/ArcGIS/rest/services/IdahoWind/IdahoWind/MapServer",{id:'proj'});
            
            // Push layers to Legend
            legendLayers.push({layer:projLayers,title:'Project Data'});

            // Add Legend
            dojo.connect(map,'onLayersAddResult',function(results){
    var legend = new esri.dijit.Legend({
     map:map,
     layerInfos:legendLayers
    },"legendDiv");
    legend.startup();
   });
 
   // Add layers to map
   map.addLayers([projLayers]);

            // Add checkboxes
            dojo.connect(map,'onLayersAddResult',function(results){
    dojo.forEach(legendLayers,function(layer){        
     var layerName = layer.title;
     var checkBox = new dijit.form.CheckBox({
      name: "checkBox" + layer.layer.id,
      value: layer.layer.id,
      checked: layer.layer.visible,
      onChange: function(evt) {
       var clayer = map.getLayer(this.value);
       clayer.setVisibility(!clayer.visible);
       this.checked = clayer.visible;
      }
     });
     //add the check box and label to the toc
     dojo.place(checkBox.domNode,dojo.byId("toggle"),"after");
     var checkLabel = dojo.create('label',{'for':checkBox.name, innerHTML:layerName},checkBox.domNode,"after");
     dojo.place("<br />",checkLabel,"after");
    });
   });
            
            // Add Measurement Widget
            var measurement = new esri.dijit.Measurement({
            map: map
           }, dojo.byId('measurementDiv'));
           measurement.startup();
           
           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 dojoType="dijit.layout.BorderContainer" design="headline" style="width: 100%; height: 100%;">
 <div dojotype="dijit.layout.ContentPane" region="top">
        <span>
          This is the header section
        </span>
    </div> 
 <div id="leftPane" dojotype="dijit.layout.ContentPane" region="left" style="width: 300px;">
  <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;">Click to toggle the visibilty of the various natural disasters</span>
            </div>
            <div id="toggle" style="padding: 2px 2px;"></div>
  </div>
 </div>
 <div dojotype="dijit.layout.ContentPane" region="center">
  <div id="map"></div>
 </div>
 <div dojotype="dijit.layout.ContentPane" region="right" style="width: 100px;">
  This is the right section
 </div>
 <div dojotype="dijit.layout.ContentPane" region="bottom">
  This is the bottom section
 </div> 
</div>

</body>
</html>

JMcNeil · ‎05-03-2012

Curt,

You closed your div on yourself.

Change this lines of code:

TO:

<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;">Click to toggle the visibilty of the various natural disasters</span>
            </div>
            <div id="toggle" style="padding: 2px 2px;"></div>
  </div>

<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;">Click to toggle the visibilty of the various natural disasters</span>
           
            <div id="toggle" style="padding: 2px 2px;"></div>
             </div>
  </div>

In your old code the closing </div> needs to be under the <div id ="toggle" not above it.

Please mark the check if I answered your question

Jay

CurtWalker · ‎05-04-2012

Jay, thank you that worked! I made that change and the checkbox appeared. Now I have another problem....

I have switched to pulling in to FeatureLayer services instead of the entire MapService. This is exactly how the code sample was structured in the code gallery. For some reason only the first layer is appearing in the legend. The second one does not appear and nothing is appearing at all in the TOC. Here's my code:

<!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>Cardno Web-Mapping</title>

 <!-- Add ESRI style -->
 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">

 <!-- Add Custom style -->
 <link rel="stylesheet" type="text/css" href="cardno.css">
 
 <!-- Required for dijits -->
 <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>

 <!-- Add ESRI Javascript API -->
 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>

 <script type="text/javascript">
  // Add Dojo elements
  dojo.require("dijit.dijit");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.AccordionContainer");
  dojo.require("dijit.TitlePane");
  dojo.require("dojo.parser");
  dojo.require("esri.map");
  dojo.require("esri.dijit.Legend");
  dojo.require("esri.dijit.Measurement");
  dojo.require("esri.SnappingManager");
  dojo.require("esri.arcgis.utils");
  dojo.require("dijit.form.CheckBox");
  
  var map;
  var legendLayers = [];
  
  function init() {
   // Set initial extent
            var startExtent = new esri.geometry.Extent(-115.489, 42.973, -115.317, 43.066, new esri.SpatialReference({wkid:4326}) );
    
            // Create map
            map = new esri.Map("map", { extent: startExtent });

            // Add base layer
            var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"); 
            map.addLayer(basemap);
            
            // Setup project layers and push to Legend
            var HammettHillWTGs_pts = new esri.layers.FeatureLayer("http://map.entrix.com/ArcGIS/rest/services/IdahoWind/IdahoWind/FeatureServer/24",{id:'Turbines'});
            legendLayers.push({layer:HammettHillWTGs_pts,title:'Turbines'});

            var HammettHillWindFarm_poly = new esri.layers.FeatureLayer("http://map.entrix.com/ArcGIS/rest/services/IdahoWind/IdahoWind/FeatureServer/27",{id:'Boundary'});
            legendLayers.push({layer:HammettHillWindFarm_poly,title:'Hammett Hill Boundary'});

            // Add Legend
            dojo.connect(map,'onLayersAddResult',function(results){
    var legend = new esri.dijit.Legend({
     map:map,
     layerInfos:legendLayers
    },"legendDiv");
    legend.startup();
   });
 
   // Add layers to map
   map.addLayers([HammettHillWTGs_pts,HammettHillWindFarm_poly]);

            // Add checkboxes
            dojo.connect(map,'onLayersAddResult',function(results){
    dojo.forEach(legendLayers,function(layer){        
     var layerName = layer.title;
     var checkBox = new dijit.form.CheckBox({
      name: "checkBox" + layer.layer.id,
      value: layer.layer.id,
      checked: layer.layer.visible,
      onChange: function(evt) {
       var clayer = map.getLayer(this.value);
       clayer.setVisibility(!clayer.visible);
       this.checked = clayer.visible;
      }
     });
     //add the check box and label to the toc
     dojo.place(checkBox.domNode,dojo.byId("toggle"),"after");
     var checkLabel = dojo.create('label',{'for':checkBox.name, innerHTML:layerName},checkBox.domNode,"after");
     dojo.place("<br />",checkLabel,"after");
    });
   });
            
            // Add Measurement Widget
            var measurement = new esri.dijit.Measurement({
            map: map
           }, dojo.byId('measurementDiv'));
           measurement.startup();
           
           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 dojoType="dijit.layout.BorderContainer" design="headline" style="width: 100%; height: 100%;">
 <div dojotype="dijit.layout.ContentPane" region="top">
        <span>Mountain Air Wind</span>
    </div> 
 <div id="leftPane" dojotype="dijit.layout.ContentPane" region="left" style="width: 300px;">
  <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;">Click to toggle the visibilty of the various natural disasters</span>
            
            <div id="toggle" style="padding: 2px 2px;"></div>
            </div>
  </div>
 </div>
 <div dojotype="dijit.layout.ContentPane" region="center">
  <div id="map"></div>
 </div>
 <div dojotype="dijit.layout.ContentPane" region="right" style="width: 100px;">
  This is the right section
 </div>
 <div dojotype="dijit.layout.ContentPane" region="bottom" style="height: 200px;">
  This is the bottom section
 </div> 
</div>

</body>
</html>

CurtWalker · ‎05-04-2012

Correction, I see now the example code is done with two MapService layers instead of with two FeatureService Layers. So can this even be done with FeatureService layers? I'll try switching to two MapService...

JMcNeil · ‎05-08-2012

Curt,

The example can't be used with feature layers. To use feature layers and mapservices together you might have to use the current example and then build something similar for the feature layers.

I would start by creating an array (This code goes in your js file)

 var mapLayers = [];  //array of layers in client map - for feature layers to map

Then when you declare your feature layer make sure to push it to your array

var yourFeatureLayer = new esri.layers.FeatureLayer("http://yourserver/ArcGIS/rest/services/yourFeatureLayer/FeatureServer/1", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]     
        });
        
        mapLayers.push(yourFeatureLayer);

  // ************* THIS IS THE CODE to make the checkboxes turn on and off the feature layer ****************************


 function layerVisibility(layer) {
        (layer.visible) ? layer.hide() : layer.show();
      }

Then in your html do something like this

<div dojoType="dijit.layout.ContentPane" title="Toggle Layers" selected="true" >
              <span style="padding:10px 0;">Click to toggle the visibilty of layers</span>
            
             <br/>
       <input type="checkbox" checked="true" onchange="layerVisibility(mapLayers[0]);"/>TitleNameOfYourFeatureLayer
       <br/>
       
    
   
           <span id="toggle"></span>
              
       
            </div>

Since my previous answer answered your question would you please be so kind to mark my previous answer as answered (hit the check and make it turn green) 🙂

Thanks
Jay