toggle button to turn on/off feature layer selection

[deleted-user-yA_w_FC9FKe5]

I'm using a buffer to summarize some data but it is currently linked to the map and I cannot turn it off or on.  I would like to be able to put this in a button but I am not sure how to clear out the selection.  I was going to try and use a toggle button to turn it on and off. 




    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/layers/FeatureLayer",
        "esri/tasks/query", "esri/geometry/Circle",
        "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
        "esri/config", "dojo/_base/Color", "dojo/dom", "dojo/domReady!", "esri/dijit/LocateButton", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionPane"
      ], function(
        Map, FeatureLayer,
        Query, Circle,
        Graphic, InfoTemplate, SimpleMarkerSymbol,
        SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
        esriConfig, Color, dom, LocateButton
      ) {

        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-81.4004,28.5269],
          zoom: 12,
          slider: false
        });
       

         var featureLayer = new FeatureLayer("MyServiceLinkHere",{
          mode: FeatureLayer.MODE_SELECTION,
          //infoTemplate: new InfoTemplate("Tract: ${ID}", "${*}"),
          outFields: ["ID","SALES","MKTSHR","CUSTOMERS"]
        });

        // selection symbol used to draw the selected census block points within the buffer polygon
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([0, 0, 0, 0.9]),
            1
          ),
          new Color([0, 0, 0, 0.5])
        );
        featureLayer.setSelectionSymbol(symbol);
       
        //make unselected features invisible
        var nullSymbol = new SimpleMarkerSymbol().setSize(0);
        featureLayer.setRenderer(new SimpleRenderer(nullSymbol));
       
        map.addLayer(featureLayer);
       
        var circleSymb = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_NULL,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
            new Color([105, 105, 105]),
            2
          ), new Color([255, 255, 0, 0.25])
        );
        var circle;

        //when the map is clicked create a buffer around the click point of the specified distance.
        map.on("click", function(evt){
          circle = new Circle({
            center: evt.mapPoint,
            geodesic: true,
            radius: 5,
            radiusUnit: "esriMiles"

          });
          map.graphics.clear();
    

   var pointSymbol = new SimpleMarkerSymbol();       
  pointSymbol.setOutline = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1);        pointSymbol.setSize(14);       
  pointSymbol.setColor(new Color([255, 0, 0, 0.80]));       
  var graphic2 = new Graphic(evt.mapPoint,pointSymbol);       
  map.graphics.add(graphic2);


          //map.infoWindow.hide();
          var graphic = new Graphic(circle, circleSymb);
          map.graphics.add(graphic);

          var query = new Query();
          query.geometry = circle.getExtent();
          //use a fast bounding box query. will only go to the server if bounding box is outside of the visible map
          featureLayer.queryFeatures(query, selectInBuffer);
        });



//---- start of message box information ------
        function selectInBuffer(response){
          var feature;
          var features = response.features;
          var inBuffer = [];
          //filter out features that are not actually in buffer, since we got all points in the buffer's bounding box
          for (var i = 0; i < features.length; i++) {
            feature = features;
            if(circle.contains(feature.geometry)){
              inBuffer.push(feature.attributes[featureLayer.objectIdField]);
            }
          }
          var query = new Query();
          query.objectIds = inBuffer;
          //use a fast objectIds selection query (should not need to go to the server)
          featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
            var r = "";
            r = "<b><u>5 Mile Tract Summary:</u></b> <br><br> Sales:      " + sumSales(results) + "<br> Market Share:  " + sumMKTSHR(results) + "<br> Customers:  " + sumCustomers(results);
            dom.byId("messages").innerHTML = r;
          });
        }

       function sumCustomers(features) {
          var CustomersTotal = 0;
          for (var x = 0; x < features.length; x++) {
            CustomersTotal = CustomersTotal + features.attributes['CUSTOMERS'];
          }
          return CustomersTotal;
  }

       function sumMKTSHR(features) {
          var MKTSHRTotal = 0;
          for (var x = 0; x < features.length; x++) {
            MKTSHRTotal = MKTSHRTotal + features.attributes['MKTSHR'];
          }
          return MKTSHRTotal.toFixed(2);
  }

        function sumSales(features) {
          var salesTotal = 0;
          for (var x = 0; x < features.length; x++) {
            salesTotal = salesTotal + features.attributes['SALES'];
          }
          return salesTotal.toFixed(2);
        //});

//---- End of message box information ------    
  
  };
//}

      });
  
  
require(["dijit/form/ToggleButton", "dojo/domReady!"], function(ToggleButton){
    new ToggleButton({
        showLabel: true,
        onChange: function(val) {
            if (val) {
                this.function1();
            } else {
                this.function2();
            }
        },
        function1: function() {
            this.set('label', 'Stop Buffer Tool');  
            //alert("Start Function");
   document.getElementById("messages").style.display = 'block';
   selectInBuffer.activate();

        },
        function2: function() {
            this.set('label', 'Start Buffer Tool');
   document.getElementById("messages").style.display = 'none';
   map.graphics.clear();
   featureLayer.clearSelection();
   selectInBuffer.deactivate(); 
   //alert("Stop Function");

        },
        label: "Start Buffer Tool"
    }, "btnBuffer");
}); 
  
    </script>
  </head>

  <body>
  <div id="messages" display="none">
    5 Mile Buffer Report
</div>
    <button dojoType="dijit.form.Button" id="btnBuffer" onClick="featureLayer.clearSelection();">Testing</button>     
<button dojoType="dijit.form.Button" onClick="selectionToolbar.activate(esri.toolbars.Draw.EXTENT);">Select Fields</button>
   <button dojoType="dijit.form.Button" onClick="featureLayer.clearSelection();">Clear Points</button>

   <button dojoType="dijit.form.Button" onClick="map.graphics.clear();">Clear Buffer Circle</button>
         <div id="mapDiv"></div>
  

  
        
  </body>
</html>

[KenBuja]

Michael, you should start getting in the habit of marking the threads you start as answered. You have quite a few posts with many responses but haven't marked any of them as having answered your question. Marking a post as the answer to your question will help others as they search for a solution to similar issues.

Please look at this page if you have any questions about that.