+ Reply to Thread
Results 1 to 3 of 3

Thread: Legend widget help

  1. #1
    Rachel Linonis
    Join Date
    Jan 2012
    Posts
    17
    Points
    0
    Answers Provided
    0


    0

    Default Legend widget help

    Click image for larger version

Name:	proof.jpg
Views:	101
Size:	116.2 KB
ID:	15546Hello 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

    Code:
        <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>

  2. #2
    Kelly Hutchins

    Join Date
    Oct 2009
    Posts
    885
    Points
    622
    Answers Provided
    106


    0
    This post is marked as the answer

    Default Re: Legend widget help

    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.

    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>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>

  3. #3
    Rachel Linonis
    Join Date
    Jan 2012
    Posts
    17
    Points
    0
    Answers Provided
    0


    0

    Default Re: Legend widget help

    It worked! Thank you Kelly.

+ Reply to Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts