Hide Table of Contents
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">
  <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
  <!--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://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css" />

  <script>var dojoConfig = { parseOnLoad:true };</script>
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
  <script>
    dojo.require("esri.map");
    dojo.require("esri.layers.FeatureLayer");

    var map, selectionToolbar, featureLayer;

    function init() {
      map = new esri.Map("map", { 
        basemap: "streets",
        center: [-97.395, 37.537],
        zoom: 11
      });
      dojo.connect(map, "onLoad", initSelectToolbar);

      var fieldsSelectionSymbol = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,255,0,0.5]));
      fieldsSelectionSymbol.setOutline(new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color([255,0,0]), 2));
      var content = "<b>Status</b>: ${STATUS}" +
                    "<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" +
                    "<br><b>Total Acres</b>: ${APPROXACRE}" +
                    "<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";
      var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content);
      featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",{
        mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
        infoTemplate: infoTemplate,
        outFields: ["*"]
      });
    
      featureLayer.setDefinitionExpression("PROD_GAS='Yes'");
      featureLayer.setSelectionSymbol(fieldsSelectionSymbol);
      dojo.connect(featureLayer, "onSelectionComplete", sumGasProduction);
      dojo.connect(featureLayer, "onSelectionClear", function(features) {
        dojo.byId('messages').innerHTML = "<i>No Selected Fields</i>";
      });
      map.addLayer(featureLayer);
    }

    function initSelectToolbar(map) {
      selectionToolbar = new esri.toolbars.Draw(map);
      var selectQuery = new esri.tasks.Query();
      
      dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) {
        selectionToolbar.deactivate();
        selectQuery.geometry = geometry;
        featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);
      });
    }

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

    dojo.ready(init);
  </script>

</head>

<body class="claro">
  <button data-dojo-type="dijit.form.Button" onClick="selectionToolbar.activate(esri.toolbars.Draw.EXTENT);">Select Fields</button>
  <button data-dojo-type="dijit.form.Button" onClick="featureLayer.clearSelection();">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>