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


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) {
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.


<!DOCTYPE html>
  <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>
    var map;

      function (
        InfoTemplate, Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol,
        Query, Draw, dom, on, parser, arrayUtil, Color
      ) {


        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.on("selection-complete", sumGasProduction);
        featureLayer.on("selection-clear", function () {
          dom.byId('messages').innerHTML = "<i>No Selected Fields</i>";

        on(dom.byId("selectFieldsButton"), "click", function () {

        on(dom.byId("clearSelectionButton"), "click", function () {

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

          on(selectionToolbar, "DrawEnd", function (geometry) {
            selectQuery.geometry = geometry;

        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>";

<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>