Hide Table of Contents
Latest Samples
Image Layers
Feature layer with selection

Description

This JavaScript sample shows how to use the draw toolbar to select gas fields from a feature layer. The gas fields are displayed using a feature layer with ONDEMAND mode. On-demand mode retrieves selected features and features within the current extent.

Click the select fields button then draw a rectangle on the map.The toolbar's onDrawEnd event fires when you finish sketching the selection rectangle. Notice that the sketch is used with the FeatureLayer's selectFeatures method to perform a spatial query.

dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) {
selectionToolbar.deactivate();
selectQuery.geometry = geometry;
featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);
});

After the features are selected onSelectionComplete fires and the total gas production for the selected fields is calculated.

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>Layer in a map service - [ON-DEMAND]</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />

  <script src="http://js.arcgis.com/3.9/"></script>
  <script>
    var map;

    require([
      "esri/InfoTemplate",
      "esri/map",
      "esri/layers/FeatureLayer",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/tasks/query",
      "esri/toolbars/draw",
      "dojo/dom",
      "dojo/on",
      "dojo/parser",
      "dojo/_base/array",
      "esri/Color",
      "dijit/form/Button",
      "dojo/domReady!"
    ],
      function (
        InfoTemplate, Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol,
        Query, Draw, dom, on, parser, arrayUtil, Color
      ) {

        parser.parse();

        var selectionToolbar, featureLayer;

        map = new Map("map", {
          basemap: "streets",
          center: [-97.395, 37.537],
          zoom: 11
        });

        map.on("load", initSelectToolbar);

        var fieldsSelectionSymbol =
          new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
          new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));

        var content = "<b>Status</b>: ${STATUS}" +
                      "<br><b>Cumulative Gas</b>: ${CUMM_GAS} MCF" +
                      "<br><b>Total Acres</b>: ${APPROXACRE}" +
                      "<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";
        var infoTemplate = new InfoTemplate("${FIELD_NAME}", content);

        featureLayer = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",
          {
            mode: FeatureLayer.MODE_ONDEMAND,
            infoTemplate: infoTemplate,
            outFields: ["*"]
          });

        featureLayer.setDefinitionExpression("PROD_GAS='Yes'");
        featureLayer.setSelectionSymbol(fieldsSelectionSymbol);
        featureLayer.on("selection-complete", sumGasProduction);
        featureLayer.on("selection-clear", function () {
          dom.byId('messages').innerHTML = "<i>No Selected Fields</i>";
        });
        map.addLayer(featureLayer);

        on(dom.byId("selectFieldsButton"), "click", function () {
          selectionToolbar.activate(Draw.EXTENT);
        });

        on(dom.byId("clearSelectionButton"), "click", function () {
          featureLayer.clearSelection();
        });

        function initSelectToolbar (event) {
          selectionToolbar = new Draw(event.map);
          var selectQuery = new Query();

          on(selectionToolbar, "DrawEnd", function (geometry) {
            selectionToolbar.deactivate();
            selectQuery.geometry = geometry;
            featureLayer.selectFeatures(selectQuery,
              FeatureLayer.SELECTION_NEW);
          });
        }

        function sumGasProduction (event) {
          var productionSum = 0;
          //summarize the cumulative gas production to display
          arrayUtil.forEach(event.features, function (feature) {
            productionSum += feature.attributes.CUMM_GAS;
          });
          dom.byId('messages').innerHTML = "<b>Selected Fields Production: " +
                                            productionSum + " mcf. </b>";
        }
      });
  </script>
</head>

<body class="claro">
  <button id="selectFieldsButton" data-dojo-type="dijit/form/Button">Select Fields</button>
  <button id="clearSelectionButton" data-dojo-type="dijit/form/Button">Clear Selection</button><br>
  <div id="map" style="position: relative; width:700px; height:500px; border:1px solid #000;"></div>
  <span id="messages"></span>
</body>

</html>