Hide Table of Contents
View Geoprocessing - Population zonal statistics sample in sandbox
Geoprocessing - Population zonal statistics


This sample uses geoprocessing to estimate the number of people within a polygon you draw on the map. Click Summarize Population, then hold down the mouse button and drag a polygon outline. When you release the button, the polygon will auto-complete and you'll see how many people are estimated to live within the polygon boundaries.

The population calculation is done through an ArcGIS Server geoprocessing service, which gives access to a model running on the server. In this sample, the model contains one tool, Zonal Statistics as Table. The tool sums the population of each cell within the polygon that you drew.

Notice that the Geoprocessor constructor requires the URL to the geoprocessing service. You can enter this URL in a Web browser (https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/GPServer/PopulationSummary) to see the Services Directory page containing information about the model's parameters.

This is a relatively simple model with just one input parameter, a GPFeatureRecordSetLayer, which you can represent with a FeatureSet in the ArcGIS JavaScript API. This sample uses a draw toolbar to help draw and capture the polygon. Notice that when you click the Summarize Population button, the toolbar is activated and the zoom level slider is hidden so that it won't interfere with the drawing.

It takes several lines of code to get this polygon into the feature set required by the model. First, the polygon starts as geometry captured by the toolbar. Then this geometry is used to create a graphic. The graphic is then added to an array of features, which is designated as the features in the FeatureSet.

The results are returned as an array of ParameterValue objects. In this model, there is only one return parameter, which is a FeatureSet. One of the attributes of the items in the feature set is the sum of the population in the polygon.

This sample uses a Dojo Dialog Dijit to display the result, a more aesthetic alternative to a typical alert box.


<!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>GP Task Population Zonal Stats</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.41/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.41/esri/css/esri.css">
      html, body, #mapDiv {
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
      #info {
        bottom: 20px;
        color: #444;
        height: auto;
        font-family: arial;
        left: 20px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        text-align: left;
        width: 200px;
        z-index: 40;

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="https://js.arcgis.com/3.41/"></script>
      var app;


    function(Color, string, registry, esriConfig, Map, ArcGISDynamicMapServiceLayer, Graphic, Geoprocessor, FeatureSet, Draw, SimpleLineSymbol, SimpleFillSymbol){

      var map, gp, toolbar;

      app = {
        "map": map,
        "toolbar": toolbar

      /*Initialize map, GP & image params*/
        app.map = map = new Map("mapDiv", {
          basemap: "topo-vector",
          center: [-87.572, 33.329],
          zoom: 5

        map.on("load", initTools);

        var populationMap = new ArcGISDynamicMapServiceLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer");

      function initTools(evtObj) {
        gp = new Geoprocessor("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/GPServer/PopulationSummary");
        gp.on("execute-complete", displayResults);

        app.toolbar = toolbar = new Draw(evtObj.map);
        toolbar.on("draw-end", computeZonalStats);

      function computeZonalStats(evtObj) {
        var geometry = evtObj.geometry;
        /*After user draws shape on map using the draw toolbar compute the zonal*/

        var symbol = new SimpleFillSymbol("none", new SimpleLineSymbol("dashdot", new Color([255,0,0]), 2), new Color([255,255,0,0.25]));
        var graphic = new Graphic(geometry,symbol);


        var features= [];

        var featureSet = new FeatureSet();
        featureSet.features = features;

        var params = { "inputPoly":featureSet };

      function displayResults(evtObj) {
        var results = evtObj.results;
        var content = string.substitute("<h4>The population in the user defined polygon is ${number:dojo.number.format}.</h4>",{number:results[0].value.features[0].attributes.SUM});



  <body class="claro">
    <div id="mapDiv"></div>
    <div id="info" class="esriSimpleSlider">
      <div data-dojo-type="dijit.form.Button" id="drawPoly" onclick="app.toolbar.activate(esri.toolbars.Draw.FREEHAND_POLYGON);app.map.hideZoomSlider();">
        Summarize Population
      Click Summarize Population and draw a polygon on the map. A GP task will be called to summarize the population within the polygon.

    <div data-dojo-type="dijit.Dialog" id="dialog1" title="Population Summary"></div>

Show Modal