ipeebles

Selecting Features - How to Toggle between NEW, ADD, and SUBTRACT modes?

Discussion created by ipeebles on Sep 5, 2013
Latest reply on Sep 5, 2013 by zj_zou
I have been working on a selection toolset.  So far, I can select a feature layer using a variety of draw tools.  What I am wanting to do is toggle between the NEW, ADD, and SUBSTRACT selection mode.  Right now, the tool set is built to select NEW features as shown in the application below.  I am looking for some suggestions on how I can achieve this functionality.  What would be the best approach?  I appreciate any assistance or feedback.  Thanks.

<!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 INITIALIZE
    function init() {
      map = new esri.Map("map", { 
        basemap: "streets",
        center: [-97.395, 37.537],
        zoom: 11
    });
   
 // CONNECT MAP WITH SELECTION TOOLBAR
 dojo.connect(map, "onLoad", initSelectToolbar);

 // FEATURE LAYER SELECTION COLOR
  var FeatureLayerSelectionSymbol = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,255,197,0.75]));
  FeatureLayerSelectionSymbol.setOutline(new esri.symbol.SimpleLineSymbol("solid", new dojo.Color([0,230,169]), 2));
   
    // FEATURE LAYER DEFINITION
    featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",{
        mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
        outFields: ["*"]
    });
    
    // FEATURE LAYER SET SELECTION SYMBOL
    featureLayer.setSelectionSymbol(FeatureLayerSelectionSymbol);

    // ADD FEATURE LAYER TO MAP
    map.addLayer(featureLayer);
    }
 
 
    // SELECTION TOOLBAR
    function initSelectToolbar(map) {
      selectionToolbar = new esri.toolbars.Draw(map);
      var selectQuery = new esri.tasks.Query();
      
      dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) {
   
     //hook up the button click events 
        dojo.connect(dojo.byId("drawPoint"),"click", function(){
          selectionToolbar.activate(esri.toolbars.Draw.POINT);
        });

        dojo.connect(dojo.byId("drawPolyline"),"click", function(){
          selectionToolbar.activate(esri.toolbars.Draw.POLYLINE);
        });
        dojo.connect(dojo.byId("drawFreehandPolyline"),"click", function(){
          selectionToolbar.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);
        });
        dojo.connect(dojo.byId("drawPolygon"),"click", function(){
          selectionToolbar.activate(esri.toolbars.Draw.POLYGON);
        });
        dojo.connect(dojo.byId("drawFreehandPolygon"),"click", function(){
          selectionToolbar.activate(esri.toolbars.Draw.FREEHAND_POLYGON);
        });
        dojo.connect(dojo.byId("drawLine"),"click", function(){
          selectionToolbar.activate(esri.toolbars.Draw.LINE);
  });
   
        selectionToolbar.deactivate();
        selectQuery.geometry = geometry;
  
        var newSelection = featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);
     //var addSelection = featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_ADD);
  //var removeSelection = featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_SUBTRACT);
      });
    }

    dojo.ready(init);
  </script>

</head>

<body class="claro">
      <button data-dojo-type="dijit.form.DropDownButton" id="selectionoptions"  data-dojo-props="value:'options'"> 
        <span>Selection Options</span> 
   <div data-dojo-type="dijit.Menu" id="selectionoptionsMenu">
    <div id="newSelection" data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="checked:'true'">New Selection</div>
    <div id="addSelection" data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="checked:'true'">Add Selection</div>
    <div id="substractSelection" data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="checked:'true'">Subtract Selection</div>
   </div>
      </button> 
   <button data-dojo-type="dijit.form.Button" id="drawrectangle" onClick="selectionToolbar.activate(esri.toolbars.Draw.EXTENT);">Select By Rectangle</button>
      <button data-dojo-type="dijit.form.Button" id="drawPoint">Select By Point</button>
      <button data-dojo-type="dijit.form.Button" id="drawPolyline">Select By Polyline</button>
      <button data-dojo-type="dijit.form.Button" id="drawFreehandPolyline">Select By Freehand Polyline</button>
      <button data-dojo-type="dijit.form.Button" id="drawPolygon">Select By Polygon</button>
      <button data-dojo-type="dijit.form.Button" id="drawFreehandPolygon">Select By Freehand Polygon</button>
      <button data-dojo-type="dijit.form.Button" id="drawLine">Select By Line</button>
   <button data-dojo-type="dijit.form.Button" onClick="featureLayer.clearSelection();">Clear Selection</button><br>
  <div id="map" style="position: relative; width:1000px; height:800px; border:1px solid #000;"></div>
  <span id="messages"></span>
</body>
</html>

Outcomes