timwilcoxon

Add up the population for the cities the user select

Discussion created by timwilcoxon on Jun 27, 2011
Latest reply on Jun 28, 2011 by hzhu
I am trying to get my website to add up the population for the cities the user select.
I took the http://help.arcgis.com/en/webapi/javascript/arcgis/demos/graphics/graphics_extent_query.html
as my base code
and added some code from http://help.arcgis.com/en/webapi/javascript/arcgis/demos/query/query_buffer.html

I think the problem is the "onComplete" it should be onDrawend, but I do not know how to do that.

 <!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>Points in Extent</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.toolbars.draw");
      dojo.require("esri.tasks.query");
 
      //global variables
      var map, defaultSymbol, highlightSymbol, resultTemplate;
 
      function init() {
        //create map, set initial extent and disable default info window behavior
        map = new esri.Map("map", {
          extent: esri.geometry.geographicToWebMercator(new esri.geometry.Extent(-125.90, 44.60, -114.65, 50.22, new esri.SpatialReference({wkid:4326}))),
          showInfoWindowOnClick:false
       });
        dojo.connect(map, "onLoad", initToolbar);
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"));
 
        //initialize symbology
        defaultSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,0,255]));
        highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0]));
 
        //initialize & execute query
        var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");
        var query = new esri.tasks.Query();
        query.where = "STATE_NAME = 'Washington'";
        query.outSpatialReference = {wkid:102100}; 
        query.returnGeometry = true;
        query.outFields = ["*"];
        queryTask.execute(query, addPointsToMap);
 
        //info template for points returned
        resultTemplate = new esri.InfoTemplate("City", "<tr><td>${CITY_NAME}</tr></td>");
      
     
 dojo.connect(queryTask, "onComplete", function(results) {
          var totalPopulation = sumPopulation(results);
          var r = "";
          r = "<b>The Total Population of Selected Cities is <i>" + totalPopulation + "</i>.</b>";
          dojo.byId('inextent').innerHTML = r;
    });
      }
   
   
 
      //initialize drawing toolbar
      function initToolbar(map) {
        var tb = new esri.toolbars.Draw(map);
 
        //find points in Extent when user completes drawing extent
        dojo.connect(tb, "onDrawEnd", findPointsInExtent);
 
        //set drawing mode to extent
        tb.activate(esri.toolbars.Draw.EXTENT);
      }
 
      //add points to map and set their symbology + info template
      function addPointsToMap(featureSet) {
        dojo.forEach(featureSet.features,function(feature){
          map.graphics.add(feature.setSymbol(defaultSymbol).setInfoTemplate(resultTemplate));
        });
 
      }
 
      //find all points within argument extent
      function findPointsInExtent(extent) {
        var results = [];
        dojo.forEach(map.graphics.graphics,function(graphic){
          if (extent.contains(graphic.geometry)) {
            graphic.setSymbol(highlightSymbol);
            results.push(graphic.getContent());
          }
          //else if point was previously highlighted, reset its symbology
          else if (graphic.symbol == highlightSymbol) {
            graphic.setSymbol(defaultSymbol);
          }
        });
   
        //display list of points in extent
        dojo.byId("results").innerHTML = "<table><tbody>" + results.join("") + "</tbody></table>";
      }
 
    function sumPopulation(results) {
        var features = results.features;
        var popTotal = 0;
        for (var x = 0; x < features.length; x++) {
          popTotal = popTotal + features[x].attributes['POP1990'];
        }
        return popTotal;
      }
 
 
 
 
      dojo.addOnLoad(init);
    </script>
 
  </head>
  <body class="claro">
    Draw an Extent on the map to find all points within this extent
 
    <!-- map div -->
    <div id="map" style="width:800px; height:400px; border:1px solid #000;"></div>
    <br />
 
    <!-- display number of points in drawn extent -->
    <b><span id="inextent">0</span></b>
 
    <!-- list points in extent -->
    <div id="results" style="width:400px; height:200px; border:1px solid #000; overflow:auto;">
    </div>
  </body>
</html>

Outcomes