topic Re: Legend widget help in ArcGIS JavaScript Maps SDK Questions https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/legend-widget-help/m-p/586433#M54773 <HTML><HEAD></HEAD><BODY><SPAN>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. </SPAN><BR /><BR /><PRE class="plain" name="code"> &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;&nbsp; &lt;html&gt;&nbsp; &nbsp; &lt;head&gt;&nbsp; &nbsp;&nbsp;&nbsp; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &nbsp;&nbsp;&nbsp; &lt;meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /&gt; &nbsp;&nbsp;&nbsp; &lt;!--The viewport meta tag is used to improve the presentation and behavior of the samples&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; on iOS devices--&gt; &nbsp;&nbsp;&nbsp; &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/&gt; &nbsp;&nbsp;&nbsp; &lt;title&gt;Map with legend&lt;/title&gt;&nbsp; &nbsp;&nbsp;&nbsp; &lt;link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css"&gt;&nbsp; &nbsp;&nbsp;&nbsp; &lt;style&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html, body { height: 98%; width: 98%; margin: 0; padding: 5px; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #leftPane{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width:20%; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/style&gt;&nbsp; &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript"&gt;var djConfig = {parseOnLoad: true};&lt;/script&gt;&nbsp; &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"&gt;&lt;/script&gt;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dijit.dijit"); // optimize: load dijit layer &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dijit.layout.BorderContainer"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dijit.layout.ContentPane"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("esri.map"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dijit.layout.TabContainer"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("esri.dijit.Legend"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dijit.layout.AccordionContainer"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("esri.layers.FeatureLayer");&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var map;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function init() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var initExtent = new esri.geometry.Extent({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "xmin": -13971902, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "ymin": 3681009, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "xmax": -12276427, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "ymax": 5302127, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "spatialReference": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "wkid": 102100 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map = new esri.Map("map", { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; extent: initExtent &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var referenceBasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer/"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.addLayer(basemap); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.addLayer(referenceBasemap); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var childrenMilitaryLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer/0", { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mode: esri.layers.FeatureLayer.MODE_ONDEMAND, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; outFields: ["*"] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //add the legend &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.connect(map,'onLayersAddResult',function(results){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(results); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var layerInfo = dojo.map(results, function(result){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(result.layer); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return {layer:result.layer,title:result.layer.name}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(layerInfo.length &gt; 0){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var legendDijit = new esri.dijit.Legend({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map:map, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layerInfos:layerInfo &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },"legendDiv"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; legendDijit.startup(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.addLayers([childrenMilitaryLayer]);&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.connect(map, 'onLoad', function (theMap) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //resize the map when the browser resizes &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.connect(dijit.byId('map'), 'resize', map, map.resize); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.addOnLoad(init);&nbsp; &nbsp;&nbsp;&nbsp; &lt;/script&gt; &nbsp; &lt;/head&gt; &nbsp;&nbsp; &nbsp; &lt;body class="claro"&gt; &nbsp;&nbsp;&nbsp; &lt;div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" &nbsp;&nbsp;&nbsp; gutters="false" style="width:100%; height:100%;"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="header" dojotype="dijit.layout.ContentPane" region="top"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Children Dependents of Military Members By County in California (With Pie Chart) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="subheader"&gt;By Age Groups: 0 to 5, 6 to 12, and 13 to 18&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div dojotype="dijit.layout.ContentPane" id="leftPane" region="left"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div dojotype="dijit.layout.TabContainer" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div dojotype="dijit.layout.ContentPane" title = "Legend" selected="true"&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="legendDiv"&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div dojotype="dijit.layout.ContentPane"&nbsp; title="About" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Click on a county in California to retrieve information about the total number of children in that county.&lt;br&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This application includes the total numbers and a pie chart displaying the ratio of each category. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="map" dojotype="dijit.layout.ContentPane" region="center"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Source: unknown, someone please fill Rachel in &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp; &lt;/body&gt;&nbsp; &lt;/html&gt; </PRE><DIV style="display:none;"> </DIV></BODY></HTML> Wed, 27 Jun 2012 21:22:02 GMT KellyHutchins 2012-06-27T21:22:02Z Legend widget help https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/legend-widget-help/m-p/586432#M54772 <HTML><HEAD></HEAD><BODY><SPAN>[ATTACH=CONFIG]15546[/ATTACH]Hello everyone. I'm having trouble send the legend info about the layer to the legendDiv element.</SPAN><BR /><BR /><SPAN>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!)</SPAN><BR /><BR /><SPAN>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 ... </SPAN><BR /><BR /><SPAN>TY <span class="lia-unicode-emoji" title=":slightly_smiling_face:">🙂</span></SPAN><BR /><BR /><PRE class="plain" name="code">&nbsp;&nbsp;&nbsp; &lt;script type="text/javascript"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dijit.dijit"); // optimize: load dijit layer &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dijit.layout.BorderContainer"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dijit.layout.ContentPane"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("esri.map"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dijit.layout.TabContainer"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("esri.dijit.Legend"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dijit.layout.AccordionContainer"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("esri.layers.FeatureLayer"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dojox.charting.Chart2D"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dojox.charting.plot2d.Pie"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dojox.charting.action2d.Highlight"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dojox.charting.action2d.MoveSlice"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dojox.charting.action2d.Tooltip"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dojo.number"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var map; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //try other themes (Julie,CubanShirts, PrimaryColors, Charged, BlueDusk, Bahamation,Harmony,Shrooms) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var theme = 'Harmony'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dojox.charting.themes." + theme);&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function init() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var initExtent = new esri.geometry.Extent({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "xmin": -13971902, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "ymin": 3681009, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "xmax": -12276427, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "ymax": 5302127, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "spatialReference": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "wkid": 102100 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map = new esri.Map("map", { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; extent: initExtent &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var referenceBasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer/"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.addLayer(basemap); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.addLayer(referenceBasemap); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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]));&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var renderer = new esri.renderer.ClassBreaksRenderer(symbol, "TotalAges0to18"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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]))); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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]))); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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]))); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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]))); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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]))); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var template = new esri.InfoTemplate(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; template.setTitle("&lt;b&gt;${NAME10} County&lt;/b&gt;"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; template.setContent(getWindowContent);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var childrenMilitaryLayer = new esri.layers.FeatureLayer("http://arcgis.focusproject.org:8399/arcgis/rest/services/SpecialPurpose/SpecialPurpose_Basic_ChildrenMilitaryCaliforniaCounty_20120627/MapServer/0", { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mode: esri.layers.FeatureLayer.MODE_ONDEMAND, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; infoTemplate: template, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; outFields: ["*"] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; childrenMilitaryLayer.setRenderer(renderer); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // add the layers &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //add the legend &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.connect(map,'onLayersAddResult',function(results){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var layerInfo = dojo.map(results, function(layer,index){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return {layer:childrenMilitaryLayer,title:layer.layer.name}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(layerInfo.length &gt; 0){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var legendDijit = new esri.dijit.Legend({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map:map, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layerInfos:layerInfo &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },"legendDiv"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; legendDijit.startup(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.addLayer(childrenMilitaryLayer);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.addLayer(referenceBasemap); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.infoWindow.resize(275, 275);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.connect(map, 'onLoad', function (theMap) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //resize the map when the browser resizes &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.connect(dijit.byId('map'), 'resize', map, map.resize); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function getWindowContent(graphic) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //make a tab container&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var tc = new dijit.layout.TabContainer({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; style: "width:100%;height:100%;" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, dojo.create("div"));&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //display a dojo pie chart &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var cp1 = new dijit.layout.ContentPane({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title: "Pie Chart" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //display attribute information &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var cp2 = new dijit.layout.ContentPane({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title: "Details", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //content: "&lt;a target='_blank' href='http://en.wikipedia.org/wiki/" + graphic.attributes.STATE_NAME + "'&gt;Wikipedia Entry&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;Median Age: " + graphic.attributes.MED_AGE + "&lt;br /&gt;Median Age (Male): " + graphic.attributes.MED_AGE_M + "&lt;br /&gt;Median Age (Female): " + graphic.attributes.MED_AGE_F &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; content: "Ages 0 to 5: &lt;b&gt;" + graphic.attributes.TotalAges0to5 + "&lt;/b&gt;&lt;br /&gt;Ages 6 to 12: &lt;b&gt;" + graphic.attributes.TotalAges6to12 + "&lt;/b&gt;&lt;br /&gt;Ages 13 to 18: &lt;b&gt;" + graphic.attributes.TotalAges13to18 + "&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;&lt;b&gt;Total Children: " + graphic.attributes.TotalAges0to18 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tc.addChild(cp2); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tc.addChild(cp1);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //create the chart that will display in the second tab &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var c = dojo.create("div", { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id: "demoChart" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, dojo.create('div'));&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var chart = new dojox.charting.Chart2D(c);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.addClass(chart, 'chart');&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //apply a color theme to the chart &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; chart.setTheme(dojo.getObject("dojox.charting.themes." + theme));&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; chart.addPlot("default", { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; type: "Pie", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; radius: 60, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; htmlLabels: true &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.connect(tc,'selectChild',function(tabItem){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(tabItem.title === "Pie Chart"){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; chart.resize(180,180); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var total = graphic.attributes.TotalAges0to18;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var Ages0to5 = dojo.number.round(graphic.attributes.TotalAges0to5); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var Ages6to12 = dojo.number.round(graphic.attributes.TotalAges6to12); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var Ages13to18 = dojo.number.round(graphic.attributes.TotalAges13to18); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; chart.addSeries("PopulationSplit", [{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; y: Ages0to5, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tooltip: Ages0to5, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text: '0 to 5' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; y: Ages6to12, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tooltip: Ages6to12, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text: '6 to 12' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; y: Ages13to18, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tooltip: Ages13to18, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text: '13 to 18' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //highlight the chart and display tooltips when you mouse over a slice. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; new dojox.charting.action2d.Highlight(chart, "default"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; new dojox.charting.action2d.Tooltip(chart, "default"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; new dojox.charting.action2d.MoveSlice(chart, "default");&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cp1.set('content', chart.node);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return tc.domNode;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.addOnLoad(init);&nbsp; &nbsp;&nbsp;&nbsp; &lt;/script&gt; &nbsp; &lt;/head&gt; &nbsp;&nbsp; &nbsp; &lt;body class="claro"&gt; &nbsp;&nbsp;&nbsp; &lt;div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" &nbsp;&nbsp;&nbsp; gutters="false" style="width:100%; height:100%;"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="header" dojotype="dijit.layout.ContentPane" region="top"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Children Dependents of Military Members By County in California (With Pie Chart) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="subheader"&gt;By Age Groups: 0 to 5, 6 to 12, and 13 to 18&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div dojotype="dijit.layout.ContentPane" id="leftPane" region="left"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div dojotype="dijit.layout.TabContainer" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div dojotype="dijit.layout.ContentPane" title = "Legend" selected="true"&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="legendDiv"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Legend coming soon.&lt;br&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; For now, the darker colors imply a higher population of children. The lighter colors imply a lower population of children. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div dojotype="dijit.layout.ContentPane"&nbsp; title="About" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Click on a county in California to retrieve information about the total number of children in that county.&lt;br&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This application includes the total numbers and a pie chart displaying the ratio of each category. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="map" dojotype="dijit.layout.ContentPane" region="center"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Source: unknown, someone please fill Rachel in &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp; &lt;/body&gt;&nbsp; &lt;/html&gt;</PRE></BODY></HTML> Wed, 27 Jun 2012 20:16:13 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/legend-widget-help/m-p/586432#M54772 RachelLinonis 2012-06-27T20:16:13Z Re: Legend widget help https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/legend-widget-help/m-p/586433#M54773 <HTML><HEAD></HEAD><BODY><SPAN>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. </SPAN><BR /><BR /><PRE class="plain" name="code"> &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;&nbsp; &lt;html&gt;&nbsp; &nbsp; &lt;head&gt;&nbsp; &nbsp;&nbsp;&nbsp; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &nbsp;&nbsp;&nbsp; &lt;meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /&gt; &nbsp;&nbsp;&nbsp; &lt;!--The viewport meta tag is used to improve the presentation and behavior of the samples&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; on iOS devices--&gt; &nbsp;&nbsp;&nbsp; &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/&gt; &nbsp;&nbsp;&nbsp; &lt;title&gt;Map with legend&lt;/title&gt;&nbsp; &nbsp;&nbsp;&nbsp; &lt;link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css"&gt;&nbsp; &nbsp;&nbsp;&nbsp; &lt;style&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html, body { height: 98%; width: 98%; margin: 0; padding: 5px; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #leftPane{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width:20%; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/style&gt;&nbsp; &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript"&gt;var djConfig = {parseOnLoad: true};&lt;/script&gt;&nbsp; &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"&gt;&lt;/script&gt;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dijit.dijit"); // optimize: load dijit layer &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dijit.layout.BorderContainer"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dijit.layout.ContentPane"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("esri.map"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dijit.layout.TabContainer"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("esri.dijit.Legend"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("dijit.layout.AccordionContainer"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.require("esri.layers.FeatureLayer");&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var map;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function init() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var initExtent = new esri.geometry.Extent({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "xmin": -13971902, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "ymin": 3681009, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "xmax": -12276427, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "ymax": 5302127, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "spatialReference": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "wkid": 102100 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map = new esri.Map("map", { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; extent: initExtent &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var referenceBasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer/"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.addLayer(basemap); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.addLayer(referenceBasemap); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var childrenMilitaryLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer/0", { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mode: esri.layers.FeatureLayer.MODE_ONDEMAND, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; outFields: ["*"] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //add the legend &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.connect(map,'onLayersAddResult',function(results){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(results); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var layerInfo = dojo.map(results, function(result){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(result.layer); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return {layer:result.layer,title:result.layer.name}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(layerInfo.length &gt; 0){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var legendDijit = new esri.dijit.Legend({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map:map, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layerInfos:layerInfo &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },"legendDiv"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; legendDijit.startup(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.addLayers([childrenMilitaryLayer]);&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.connect(map, 'onLoad', function (theMap) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //resize the map when the browser resizes &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.connect(dijit.byId('map'), 'resize', map, map.resize); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojo.addOnLoad(init);&nbsp; &nbsp;&nbsp;&nbsp; &lt;/script&gt; &nbsp; &lt;/head&gt; &nbsp;&nbsp; &nbsp; &lt;body class="claro"&gt; &nbsp;&nbsp;&nbsp; &lt;div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" &nbsp;&nbsp;&nbsp; gutters="false" style="width:100%; height:100%;"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="header" dojotype="dijit.layout.ContentPane" region="top"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Children Dependents of Military Members By County in California (With Pie Chart) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="subheader"&gt;By Age Groups: 0 to 5, 6 to 12, and 13 to 18&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div dojotype="dijit.layout.ContentPane" id="leftPane" region="left"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div dojotype="dijit.layout.TabContainer" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div dojotype="dijit.layout.ContentPane" title = "Legend" selected="true"&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="legendDiv"&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div dojotype="dijit.layout.ContentPane"&nbsp; title="About" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Click on a county in California to retrieve information about the total number of children in that county.&lt;br&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This application includes the total numbers and a pie chart displaying the ratio of each category. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="map" dojotype="dijit.layout.ContentPane" region="center"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Source: unknown, someone please fill Rachel in &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp; &lt;/body&gt;&nbsp; &lt;/html&gt; </PRE><DIV style="display:none;"> </DIV></BODY></HTML> Wed, 27 Jun 2012 21:22:02 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/legend-widget-help/m-p/586433#M54773 KellyHutchins 2012-06-27T21:22:02Z Re: Legend widget help https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/legend-widget-help/m-p/586434#M54774 <HTML><HEAD></HEAD><BODY><SPAN>It worked! Thank you Kelly. <span class="lia-unicode-emoji" title=":slightly_smiling_face:">🙂</span></SPAN></BODY></HTML> Wed, 27 Jun 2012 21:28:05 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/legend-widget-help/m-p/586434#M54774 RachelLinonis 2012-06-27T21:28:05Z