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

IanPeebles — Thu, 05 Sep 2013 13:42:20 GMT

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>

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

IanPeebles — Thu, 05 Sep 2013 14:03:30 GMT

Here is an attached screenshot of my working toolset. I would like to some how use the selection options drop down list to select the selection mode. As shown in the screenshot, the user will have a variety of selection options.

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

JasonZou — Sat, 11 Dec 2021 17:21:53 GMT

Instead of using CheckedMenuItem, I would use Select or regular MenuItem to set the selection mode since the three selection modes should be mutually exclusive, meaning only one selection mode should be set. Below sample uses MenuItem.

<div data-dojo-type="dijit.Menu" id="selectionoptionsMenu">
      <div data-dojo-type="dijit.MenuItem" id="newSelection">New Selection</div>
      <div data-dojo-type="dijit.MenuItem" id="addSelection">Add Selection</div>
      <div data-dojo-type="dijit.MenuItem" id="substractSelection">Subtract Selection</div>
</div>

JS code:

var selectionMode;
function init() {
    dojo.connect(dijit.byId("newSelection"), "onClick", function() { selectionMode = esri.layers.FeatureLayer.SELECTION_NEW; });
    dojo.connect(dijit.byId("addSelection"), "onClick", function() { selectionMode = esri.layers.FeatureLayer.SELECTION_ADD; });
    dojo.connect(dijit.byId("substractSelection"), "onClick", function() { selectionMode = esri.layers.FeatureLayer.SELECTION_SUBTRACT; });

    // ...
}

When make selection,

featureLayer.selectFeatures(selectQuery, selectionMode);

topic Re: Selecting Features - How to Toggle between NEW, ADD, and SUBTRACT modes? in ArcGIS JavaScript Maps SDK Questions

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

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

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