Legend widget help

RachelLinonis

[ATTACH=CONFIG]15546[/ATTACH]Hello everyone. I'm having trouble send the legend info about the layer to the legendDiv element.

I'll post my code, but you won't be able to see much. Our arcgis server hasn't been made public yet. I can see the layer and the attribute breaks, so I know it exists. (I've attached a screenshot as proof!)

I was wondering if anyone could take a peak at the bottom-half of my code, to see if I'm missing anything or what could be going wrong ...

TY 🙂

    <script type="text/javascript">       dojo.require("dijit.dijit"); // optimize: load dijit layer       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.require("dijit.layout.TabContainer");       dojo.require("esri.dijit.Legend");              dojo.require("dijit.layout.AccordionContainer");       dojo.require("esri.layers.FeatureLayer");       dojo.require("dojox.charting.Chart2D");       dojo.require("dojox.charting.plot2d.Pie");       dojo.require("dojox.charting.action2d.Highlight");       dojo.require("dojox.charting.action2d.MoveSlice");       dojo.require("dojox.charting.action2d.Tooltip");       dojo.require("dojo.number");              var map;       //try other themes (Julie,CubanShirts, PrimaryColors, Charged, BlueDusk, Bahamation,Harmony,Shrooms)       var theme = 'Harmony';       dojo.require("dojox.charting.themes." + theme);         function init() {         var initExtent = new esri.geometry.Extent({           "xmin": -13971902,           "ymin": 3681009,           "xmax": -12276427,           "ymax": 5302127,           "spatialReference": {             "wkid": 102100           }         });         map = new esri.Map("map", {           extent: initExtent         });          var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/");         var referenceBasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer/");         map.addLayer(basemap);         map.addLayer(referenceBasemap);                                                       var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([4,90,141]), 0.5),new dojo.Color([116,169,207, 0.6]));             var renderer = new esri.renderer.ClassBreaksRenderer(symbol, "TotalAges0to18");         renderer.addBreak(0, 831, new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([0,0,0]), 0.2),new dojo.Color([239, 243, 255, 0.6])));         renderer.addBreak(832, 2701, new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([0,0,0]), 0.2),new dojo.Color([189, 215, 231, 0.6])));         renderer.addBreak(2702, 6438, new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([0,0,0]), 0.2),new dojo.Color([107, 174, 214, 0.6])));         renderer.addBreak(6439, 13485, new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([0,0,0]), 0.2),new dojo.Color([49, 130, 189, 0.6])));         renderer.addBreak(13486, 80000, new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([0,0,0]), 0.2),new dojo.Color([8, 81, 156, 0.6])));                                                               var template = new esri.InfoTemplate();         template.setTitle("<b>${NAME10} County</b>");         template.setContent(getWindowContent);          var childrenMilitaryLayer = new esri.layers.FeatureLayer("http://arcgis.focusproject.org:8399/arcgis/rest/services/SpecialPurpose/SpecialPurpose_Basic_ChildrenMilitaryCaliforniaCounty_20120627/MapServer/0", {           mode: esri.layers.FeatureLayer.MODE_ONDEMAND,           infoTemplate: template,           outFields: ["*"]         });                         childrenMilitaryLayer.setRenderer(renderer);                           // add the layers                  //add the legend         dojo.connect(map,'onLayersAddResult',function(results){           var layerInfo = dojo.map(results, function(layer,index){             return {layer:childrenMilitaryLayer,title:layer.layer.name};           });           if(layerInfo.length > 0){             var legendDijit = new esri.dijit.Legend({               map:map,               layerInfos:layerInfo             },"legendDiv");             legendDijit.startup();           }         });                                    map.addLayer(childrenMilitaryLayer);          map.addLayer(referenceBasemap);         map.infoWindow.resize(275, 275);          dojo.connect(map, 'onLoad', function (theMap) {           //resize the map when the browser resizes           dojo.connect(dijit.byId('map'), 'resize', map, map.resize);         });       }        function getWindowContent(graphic) {         //make a tab container          var tc = new dijit.layout.TabContainer({           style: "width:100%;height:100%;"         }, dojo.create("div"));          //display a dojo pie chart         var cp1 = new dijit.layout.ContentPane({           title: "Pie Chart"         });          //display attribute information         var cp2 = new dijit.layout.ContentPane({           title: "Details",           //content: "<a target='_blank' href='http://en.wikipedia.org/wiki/" + graphic.attributes.STATE_NAME + "'>Wikipedia Entry</a><br /><br />Median Age: " + graphic.attributes.MED_AGE + "<br />Median Age (Male): " + graphic.attributes.MED_AGE_M + "<br />Median Age (Female): " + graphic.attributes.MED_AGE_F           content: "Ages 0 to 5: <b>" + graphic.attributes.TotalAges0to5 + "</b><br />Ages 6 to 12: <b>" + graphic.attributes.TotalAges6to12 + "</b><br />Ages 13 to 18: <b>" + graphic.attributes.TotalAges13to18 + "</b><br /><br /><b>Total Children: " + graphic.attributes.TotalAges0to18         });           tc.addChild(cp2);         tc.addChild(cp1);          //create the chart that will display in the second tab         var c = dojo.create("div", {           id: "demoChart"         }, dojo.create('div'));          var chart = new dojox.charting.Chart2D(c);          dojo.addClass(chart, 'chart');          //apply a color theme to the chart         chart.setTheme(dojo.getObject("dojox.charting.themes." + theme));          chart.addPlot("default", {           type: "Pie",           radius: 60,           htmlLabels: true         });             dojo.connect(tc,'selectChild',function(tabItem){               if(tabItem.title === "Pie Chart"){                   chart.resize(180,180);               }             });         var total = graphic.attributes.TotalAges0to18;          var Ages0to5 = dojo.number.round(graphic.attributes.TotalAges0to5);         var Ages6to12 = dojo.number.round(graphic.attributes.TotalAges6to12);         var Ages13to18 = dojo.number.round(graphic.attributes.TotalAges13to18);         chart.addSeries("PopulationSplit", [{           y: Ages0to5,           tooltip: Ages0to5,           text: '0 to 5'         }, {           y: Ages6to12,           tooltip: Ages6to12,           text: '6 to 12'         }, {           y: Ages13to18,           tooltip: Ages13to18,           text: '13 to 18'         },          ]);         //highlight the chart and display tooltips when you mouse over a slice.         new dojox.charting.action2d.Highlight(chart, "default");         new dojox.charting.action2d.Tooltip(chart, "default");         new dojox.charting.action2d.MoveSlice(chart, "default");              //         cp1.set('content', chart.node);          return tc.domNode;        }        dojo.addOnLoad(init);      </script>   </head>      <body class="claro">     <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"     gutters="false" style="width:100%; height:100%;">       <div id="header" dojotype="dijit.layout.ContentPane" region="top">         Children Dependents of Military Members By County in California (With Pie Chart)        <div id="subheader">By Age Groups: 0 to 5, 6 to 12, and 13 to 18</div>       </div>       <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left">         <div dojotype="dijit.layout.TabContainer" >           <div dojotype="dijit.layout.ContentPane" title = "Legend" selected="true">              <div id="legendDiv">                 Legend coming soon.<br><br>                                  For now, the darker colors imply a higher population of children. The lighter colors imply a lower population of children.             </div>           </div>           <div dojotype="dijit.layout.ContentPane"  title="About" >                          Click on a county in California to retrieve information about the total number of children in that county.<br><br>              This application includes the total numbers and a pie chart displaying the ratio of each category.           </div>         </div>       </div>       <div id="map" dojotype="dijit.layout.ContentPane" region="center">       </div>       <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" >           Source: unknown, someone please fill Rachel in       </div>     </div>   </body>  </html>

proof.jpg

khutchins

Looks like you were adding your childrenMilitaryLayer to the map using map.addLayer which doesn't fire the 'onLayersAddResult' event. If you switch to map.addLayers then your code should work. Here's the code from my test app that shows this working with the Earthquakes feature layer.

 <!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; }       #leftPane{         width:20%;       }            </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.dijit"); // optimize: load dijit layer       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.require("dijit.layout.TabContainer");       dojo.require("esri.dijit.Legend");              dojo.require("dijit.layout.AccordionContainer");       dojo.require("esri.layers.FeatureLayer");               var map;          function init() {         var initExtent = new esri.geometry.Extent({           "xmin": -13971902,           "ymin": 3681009,           "xmax": -12276427,           "ymax": 5302127,           "spatialReference": {             "wkid": 102100           }         });         map = new esri.Map("map", {           extent: initExtent         });          var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/");         var referenceBasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer/");         map.addLayer(basemap);         map.addLayer(referenceBasemap);                                              var childrenMilitaryLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer/0", {           mode: esri.layers.FeatureLayer.MODE_ONDEMAND,           outFields: ["*"]         });                           //add the legend         dojo.connect(map,'onLayersAddResult',function(results){             console.log(results);           var layerInfo = dojo.map(results, function(result){             console.log(result.layer);             return {layer:result.layer,title:result.layer.name};           });           if(layerInfo.length > 0){             var legendDijit = new esri.dijit.Legend({               map:map,               layerInfos:layerInfo             },"legendDiv");             legendDijit.startup();           }         });                 map.addLayers([childrenMilitaryLayer]);            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="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"     gutters="false" style="width:100%; height:100%;">       <div id="header" dojotype="dijit.layout.ContentPane" region="top">         Children Dependents of Military Members By County in California (With Pie Chart)        <div id="subheader">By Age Groups: 0 to 5, 6 to 12, and 13 to 18</div>       </div>       <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left">         <div dojotype="dijit.layout.TabContainer" >           <div dojotype="dijit.layout.ContentPane" title = "Legend" selected="true">              <div id="legendDiv">              </div>           </div>           <div dojotype="dijit.layout.ContentPane"  title="About" >                          Click on a county in California to retrieve information about the total number of children in that county.<br><br>              This application includes the total numbers and a pie chart displaying the ratio of each category.           </div>         </div>       </div>       <div id="map" dojotype="dijit.layout.ContentPane" region="center">       </div>       <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" >           Source: unknown, someone please fill Rachel in       </div>     </div>   </body>  </html>