acwalker

Legend TOC checkboxes not working

Discussion created by acwalker on May 3, 2012
Latest reply on May 8, 2012 by esrijay
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>

Outcomes