Hide Table of Contents
View Query map with geoprocessing result sample in sandbox
Query map with geoprocessing result

Description

This sample demonstrates how you can use the results of one task as input to another task. Click anywhere on the map to see a polygon of the area where you can drive in under 2 minutes. Shortly after the polygon appears, you'll see the US Census block group points appear that fall within the 2 minute drive time polygon. These block group points are used to estimate the number of people that live within the polygon.

What tasks are occurring here? When you first click the map, the coordinates of your click are sent to a Geoprocessor task. The task accesses a GIS model on the server that has been made available to you through an ArcGIS Server geoprocessing service. In this case the model calculates drive times, and it has two input parameters: "Input_Location" and "Drive_Times". The input location is a feature set derived from the point you clicked, and the drive time is hard coded to 2 minutes. If you're new to geoprocessing with the ArcGIS JavaScript API, the topic Using the Geoprocessor and the Geoprocessing samples on this site can help you better understand what is happening in this part of the sample.

The output from the geoprocessor is submitted as input geometry to a QueryTask. This task is configured to work with just one layer: the Census Block Points layer of the ESRI_Census_USA service. The task performs a spatial query for block points that fall within the drive time polygon. This important line of code assigns the geoprocessor output geometry as the query geometry:

query.geometry = feature.geometry;

The result geometries of both the geoprocessing and query tasks are returned as graphics in FeatureSets. Note that you need to assign symbols to these graphics before you can add them to the map. If you want users to see an InfoWindow when they click the graphic, you also need to format an InfoTemplate.

Notice that this sample is driven by events. The mouse click, the completion of the geoprocessing, and the completion of the query task are all events that cause new things to happen in the application. See Working with events to learn more about how to use events in your applications.

This sample references a proxy page in case the drive time polygon geometry submitted to the query task is large enough to exceed the 2000 character limit imposed by some Web browsers on GET requests. See Using the proxy page to learn more about this.

esriConfig.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
esriConfig
.defaults.io.alwaysUseProxy = false;

Code

<!DOCTYPE html>
<html>
  <head>
    <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>Select features using result from geoprocessing task</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css" />  
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
      #messages{
        position:absolute;
        top:10px;
        right:20px;
        padding: 6px;
        background-color: #ccc;
        border-radius: 4px;
        border: solid 1px #333;
        z-index:99;
        max-width: 150px;
      }
    </style>
    <script src="https://js.arcgis.com/3.22/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.tasks.query");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.tasks.gp");

      var map;
      var census; 

      function init() {


        esri.config.defaults.io.proxyUrl = "/proxy/";


        map = new esri.Map("mapDiv", { 
          basemap: "streets",
          center: [-95.249, 38.954],
          zoom: 14
        });
        
        //add the census data in selection only mode. When the drive time polygon is generated we'll use that
        //to select features within the drive time zone. 
        var infoTemplate = new esri.InfoTemplate("Block: ${BLOCK}", "${*}");

        var census = new esri.layers.FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{
          mode: esri.layers.FeatureLayer.MODE_SELECTION,
          infoTemplate:infoTemplate,
          outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLOCK"]
        });

        //define a symbol for the selected features 
        var symbol = new esri.symbol.SimpleMarkerSymbol();
        symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
        symbol.setSize(8);
        symbol.setColor(new dojo.Color([255,255,0,0.5]));
        census.setSelectionSymbol(symbol);

        map.addLayer(census);


        //GP Service Endpoint
        var gp = new esri.tasks.Geoprocessor("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Network/ESRI_DriveTime_US/GPServer/CreateDriveTimePolygons");
 
        
        // When the map is clicked generate a drive time polygon of 2 minutes around the click location
        dojo.connect(map, "onClick", function(evt) {

 
          var graphic = new esri.Graphic(evt.mapPoint);

          
          var featureSet = new esri.tasks.FeatureSet();
          featureSet.features = [graphic];
          
          var params = { "Input_Location":featureSet, "Drive_Times":2 };
          gp.execute(params);
          dojo.byId('messages').innerHTML = "<b>Executing GP Task...</b>";
        });

        //When the geoprocessing task is completed draw the drive time polygon on the map and 
        //select features from the census layer. 
        dojo.connect(gp, "onExecuteComplete", function(results,messages) {

          map.graphics.clear();
          var feature = results[0].value.features[0];
          var symbol = new esri.symbol.SimpleFillSymbol(
            esri.symbol.SimpleFillSymbol.STYLE_NULL,
            new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
            new dojo.Color([0,0,0]), 2),new dojo.Color([255,255,0,0.25])
          );         
          feature.setSymbol(symbol);
          map.graphics.add(feature);
          
          var query = new esri.tasks.Query();
          query.geometry = feature.geometry;
          
          dojo.byId('messages').innerHTML = "<b>Selecting Features...</b>";
          census.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(results){
              var totalPopulation = sumPopulation(results);
              var r = "";
              r = "<b>The total Census Block population within the drive time polygon is <i>" + totalPopulation + "</i>.</b>";
              dojo.byId('messages').innerHTML = r;
              });

        });

      }

      function sumPopulation(features) {
        var popTotal = 0;
        for (var x = 0; x < features.length; x++) {
          popTotal = popTotal + features[x].attributes['POP2000'];
        }
        return popTotal;
      }

      dojo.ready(init);
    </script>
  </head>

  <body class="claro">
    <span id="messages">Click the map to execute a 2 minute drive time and then use that result geometry as input into a query.</span>
    <div id="mapDiv"></div>
  </body>
</html>