<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>
Solved! Go to Solution.
<!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>
<!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>