Community

Add up the population for the cities the user select

625
2
06-27-2011 06:53 AM
TimothyWilcoxon
by
New Contributor
‎06-27-2011 06:53 AM
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.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>
0 Kudos
2 Replies
TimothyWilcoxon
by
New Contributor
‎06-28-2011 08:09 AM
Is this not the place to post these types of questions?
As of now, 33 people have views the topic but not one of them has given any insight on how this can be accomplished. Is the question too difficult? It should be pretty straight forward. I am close; I just need someone with a little more experience with the api to tweak it a little.

Thanks
Timothy
0 Kudos
HemingZhu
by
Occasional Contributor III
‎06-28-2011 09:44 AM
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.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>


There are two issues in your code. 1. You defined querytask call back twice. 2. after draw an extend, you should do another query to get the population or get the total population in your findPointsInExtent(). attached is one version of modified code.
population.txt.zip
0 Kudos