Select with Feature Layer | ArcGIS API for JavaScript

This sample shows how you can use the results of one task in another task. Click the map to see a buffer of 1 kilometer around the point that you clicked (you can change this default buffer distance if you want). You'll also see some points appear that represent census blocks in the buffered area. Click on a point to see more information about the census block.

Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--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>Select with feature layer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding: 0;
        margin: 0;
        height: 100%;
      }
      #messages{
        background-color: #fff;
        box-shadow: 0 0 5px #888;
        font-size: 1.1em;
        max-width: 15em;
        padding: 0.5em;
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 40;
      }
    </style>
    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/layers/FeatureLayer", 
        "esri/tasks/query", "esri/tasks/QueryTask", 
        "esri/tasks/GeometryService", "esri/tasks/BufferParameters",
        "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", 
        "esri/config", "dojo/_base/Color", "dojo/dom", "dojo/domReady"
      ], function(
        Map, FeatureLayer,
        Query, QueryTask,
        GeometryService, BufferParameters,
        Graphic, InfoTemplate, SimpleMarkerSymbol,
        SimpleLineSymbol, SimpleFillSymbol, 
        esriConfig, Color, dom
      ) {
        // use a proxy page if a URL generated by this page is greater than 2000 characters
        //
        // using a polygon (the buffer returned from the geometry service) as a query geometry
        // will generate a long url as all vertexes from the geometry are sent to the service as 
        // part of the URL
        //
        // if proxyUrl is null or undefined the featureLayer.selectFeatures call will not work
        esriConfig.defaults.io.proxyUrl = "/proxy";

        map = new Map("mapDiv", { 
          basemap: "streets",
          center: [-95.249, 38.954],
          zoom: 14,
          slider: false
        });
        
        //add the census block points in selection mode. Note that an info template has been defined so when 
        //selected features are clicked a popup window will appear displaying the content defined in the info template.
        var featureLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0",{
          mode: FeatureLayer.MODE_SELECTION,
          infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),
          outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLOCK"]
        });

        // selection symbol used to draw the selected census block points within the buffer polygon
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE, 
          12, 
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL, 
            new Color([247, 34, 101, 0.9]), 
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
        featureLayer.setSelectionSymbol(symbol); 
        map.addLayer(featureLayer);

        // geometry service that will be used to perform the buffer
        var geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        //when the map is clicked create a buffer around the click point of the specified distance.
        map.on("click", function(evt){
          //define input buffer parameters
          var params = new BufferParameters();
          params.geometries  = [ evt.mapPoint ];
          params.distances = [ 1 ];
          params.unit = GeometryService.UNIT_STATUTE_MILE;

          geometryService.buffer(params);
        });

        geometryService.on("buffer-complete", function(result){
          map.graphics.clear();
          // draw the buffer geometry on the map as a map graphic
          var symbol = new SimpleFillSymbol(
            SimpleFillSymbol.STYLE_NULL,
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
              new Color([105,105,105]), 
              2
            ),new Color([255,255,0,0.25])
          );
          var bufferGeometry = result.geometries[0]
          var graphic = new Graphic(bufferGeometry, symbol);
          map.graphics.add(graphic);

          //Select features within the buffered polygon. To do so we'll create a query to use the buffer graphic
          //as the selection geometry.
          var query = new Query();
          query.geometry = bufferGeometry;
          featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
            var totalPopulation = sumPopulation(results);
            var r = "";
            r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";
            dom.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;
        }
      });
    </script>
  </head>

  <body>
    <span id="messages">Click on the map to select census block points within 1 mile.</span>
    <div id="mapDiv"></div>
  </body>
</html>

View live sample Download as a zip file Explore in the sandbox

Description

Code

View live sample
Download as a zip file
Explore in the sandbox