topic Re: Combine two Examples with Buttons to activate code in ArcGIS JavaScript Maps SDK Questions

Combine two Examples with Buttons to activate code

jaykapalczynski — Sun, 12 Dec 2021 16:28:16 GMT

I am combining a few examples from the JS API. I am trying to make them only active when a button is clicked.
On Load neither are active. I click my identify button and it identifies. I then click my Buffer Button and it runs the buffer code, buffers and returns results to a grid.
It does not appear that the identify is working after the Buffer button is clicked (perfect)
But after I run the Buffer Tool and click back to the identify it still runs the Buffer Code....

I am looking for a way to "turn it off" the buffer code when I click the Identify button. (for a lack of better words)

I am not sure where I can:
1. Turn off the Buffer Tool - I tough of putting some sort of code in the IDENTIFY BUTTON code to disable it?
2. Remove the graphics from the feature layer that were created when the selection occurs from the buffer

 on(dom.byId("IDENTIFY"), "click", function () {
        initializeSidebar(app.map);
 //Clear Graphic Circle from BufferTool
 app.map.graphics.clear();
 clearContent();
 // CLOSE THE PANE WHEN SELECTED
 dijit.byId("Tools").set('open',false); //Close
  })


  on(dom.byId("BUFFER"), "click", function () {
 dom.byId("featureCount").innerHTML = "Click Identify Tool to select feature(s)";
        featureLayer0.setInfoTemplate(null);
        featureLayer1.setInfoTemplate(null);
        app.map.infoWindow.hide();
        clearContent();

        // CLOSE THE PANE WHEN SELECTED
 dijit.byId("Tools").set('open',false); //Close

 BufferTool(app.map);
   })

Function BufferTool

    function BufferTool(map){

        dialog = new TooltipDialog({
          id: "tooltipDialog",
          style: "position: absolute; width: 100px; font: normal normal normal 10pt Helvetica;z-index:100"
        });
        dialog.startup();

       // selection symbol used to draw the selected census block points within the buffer polygon
        var point = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          25,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([137, 214, 171, 0.9]),
            1
          ),
          new Color([137, 214, 171, 0.5])
        );


        app.map.on("load", function(){
          app.map.graphics.enableMouseEvents();
          app.map.graphics.on("mouse-out", closeDialog);
        });

        //listen for when the onMouseOver event fires on the countiesGraphicsLayer
        //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
        featureLayer.on("mouse-over", function(evt){
         var t = "<b>${SITENAME}</b><hr><b>Region: </b>${REGION}<br>";
          var content = esriLang.substitute(evt.graphic.attributes,t);
          var highlightGraphic = new Graphic(evt.graphic.geometry,point);
          app.map.graphics.add(highlightGraphic);

          dialog.setContent(content);

          domStyle.set(dialog.domNode, "opacity", 0.85);
          dijitPopup.open({
            popup: dialog,
            x: evt.pageX,
            y: evt.pageY
          });
        });


        // selection symbol used to draw the selected census block points within the buffer polygon
        var symbol2 = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
        featureLayer.setSelectionSymbol(symbol2);

        // change cursor to indicate features are click-able
        featureLayer.on("mouse-over", function () {
            app.map.setMapCursor("pointer");
        });

        featureLayer.on("mouse-out", function () {
            app.map.setMapCursor("default");
        });

        // Add the Feature Layer To Map
        app.map.addLayer(featureLayer);


        // geometry service that will be used to perform the buffer
        var geometryService = new GeometryService("https://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        //when the map is clicked create a buffer around the click point of the specified distance.
        app.map.on("click", function(evt){
          //define input buffer parameters
          var params = new BufferParameters();
          params.geometries  = [ evt.mapPoint ];
          params.distances = [ 50 ];
          params.unit = GeometryService.UNIT_STATUTE_MILE;

          geometryService.buffer(params);
        });

        geometryService.on("buffer-complete", function(result){
          app.map.graphics.clear();
          // draw the buffer geometry on the map as a map graphic
          var symbol2 = new SimpleFillSymbol(
            SimpleFillSymbol.STYLE_NULL,
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID,
              new Color([105,105,105]),
              2
            ),new Color([255,255,0,0.25])
          );
          var bufferGeometry = result.geometries[0]
          var graphic = new Graphic(bufferGeometry, symbol2);
          app.map.graphics.add(graphic);


 //Select features within the buffered polygon. To do so we'll create a query to use the buffer graphic
          //as the selection geometry.
          var query = new Query();
          query.geometry = bufferGeometry;
   // Select the Points within the Buffer and show them
          featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
          });
          // Query for the records with the given object IDs and populate the grid
          featureLayer.queryFeatures(query, function (featureSet) {
            updateGrid(featureSet);
          });
      });



   } // End Function BufferTool

      function closeDialog() {
          app.map.graphics.clear();
          dijitPopup.close(dialog);
        }

      function updateGrid(featureSet) {
        var data = arrayUtils.map(featureSet.features, function (entry, i) {
          return {
            NAME: entry.attributes.SITENAME,
            REGION: entry.attributes.REGION,
            WATERBODY: entry.attributes.WATERBODY,
            TYPE: entry.attributes.TYPE,
            ACCESSAREA: entry.attributes.ACCESSAREA,
            LOCATION: entry.attributes.LOCATION
          };
        });
        grid.store.setData(data);
        grid.refresh();
      }

    // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
        var markerSymbol = new SimpleMarkerSymbol();
        markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
        markerSymbol.setColor(new Color("#00FFFF"));
    // lineSymbol used for freehand polyline, polyline and line.
        var lineSymbol = new CartographicLineSymbol(
          CartographicLineSymbol.STYLE_SOLID,
          new Color([55,77,173,.75]), 1.5,
          CartographicLineSymbol.CAP_ROUND,
          CartographicLineSymbol.JOIN_MITER, 5
        );
    // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
    // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
 var fillSymbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([55,77,173,0.35]),
            2
          ),
          new Color([125,125,125,0.35])
        );


    // function toolbar
        function initToolbar() {
   alert("In initToolbar");

          tb = new Draw(map);
          tb.on("draw-end", addGraphic);
     // event delegation so a click handler is not
     // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
            if ( evt.target.id === "info" ) {
              return;
            }
            var tool = evt.target.id.toLowerCase();
            map.disableMapNavigation();
            tb.activate(tool);
          });
        }
    // add graphic
        function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics
          tb.deactivate();
          app.map.enableMapNavigation();

          // figure out which symbol to use
          var symbol;
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = markerSymbol;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = lineSymbol;
          }
          else {
            symbol = fillSymbol;
          }

          app.map.graphics.add(new Graphic(evt.geometry, symbol));
        }

Re: Combine two Examples with Buttons to activate code

jaykapalczynski — Sat, 11 Dec 2021 19:23:28 GMT

This is the code from the IDENTIFY Button

    function initializeSidebar(map){
        var popup = map.infoWindow;

        //when the selection changes update the side panel to display the popup info for the
        //currently selected feature.
        connect.connect(popup, "onSelectionChange", function(){
            displayPopupContent(popup.getSelectedFeature());
        });

        //when the selection is cleared remove the popup content from the side panel.
        connect.connect(popup, "onClearFeatures", function(){
           //dom.byId replaces dojo.byId
           dom.byId("featureCount").innerHTML = "Click Identify Tool to select feature(s)";
           //registry.byId replaces dijit.byId
           registry.byId("leftPane").set("content", "");
           domUtils.hide(dom.byId("pager"));
        });

        //When features are associated with the map's info window update the sidebar with the new content.
        connect.connect(popup, "onSetFeatures", function(){
           displayPopupContent(popup.getSelectedFeature());
           dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";

       //enable navigation if more than one feature is selected
       popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
         });
       }

    function displayPopupContent(feature){
       if(feature){
           var content = feature.getContent();
           registry.byId("leftPane").set("content", content);
       }
    }

    function selectPrevious(){
       map.infoWindow.selectPrevious();
    }

    function selectNext(){
       map.infoWindow.selectNext();
    }

    function clearContent() {
       registry.byId("leftPane").set("content", "");
       domUtils.hide(dom.byId("pager"));
    }

Re: Combine two Examples with Buttons to activate code

jaykapalczynski — Wed, 02 Apr 2014 15:19:09 GMT

I am just not seeing where I can turn off the Buffer Tool....it just keeps selecting and running...
I have to click to button to activate it...there has to be a way to shut it off...
Anyone
Thanks

Re: Combine two Examples with Buttons to activate code

KenBuja — Sat, 11 Dec 2021 19:23:31 GMT

In the BufferTool function, you add an event listener for the map click.

app.map.on("click", function(evt)

You could disconnect this event listener when the Identify Button is pressed (see the Event help topic) or use a variable to short circuit that click event. Something like

    app.map.on("click", function(evt){
          //define input buffer parameters
          if (CanRunBuffer) {
              var params = new BufferParameters();
              params.geometries  = [ evt.mapPoint ];
              params.distances = [ 50 ];
              params.unit = GeometryService.UNIT_STATUTE_MILE;

              geometryService.buffer(params);
        }
    });

Re: Combine two Examples with Buttons to activate code

jaykapalczynski — Sun, 12 Dec 2021 16:28:19 GMT

I read through adn still a bit confused...I tried something like this

The Buffer code runs, but I still cant turn it off...am I close????

THANK YOU


            on(dom.byId("IDENTIFY"), "click", function () {
  initializeSidebar(app.map);

  //Clear Graphic Circle from BufferTool
  app.map.graphics.clear();
  clearContent();

  connect.disconnect(BufferTool(app.map));

            })

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

                app.map.infoWindow.hide();
                clearContent();

  mapOnClick = connect.connect(map, "onClick", BufferTool(app.map))

                // CLOSE THE PANE WHEN SELECTED
  dijit.byId("Tools").set('open',false); //Close


            })

Re: Combine two Examples with Buttons to activate code

jaykapalczynski — Wed, 02 Apr 2014 17:21:26 GMT

I tried these to unload the handler as...neither seemed to work

connect.disconnect(mapOnClick);

mapOnClick.remove();

Re: Combine two Examples with Buttons to activate code

KenBuja — Sat, 11 Dec 2021 19:23:34 GMT

I read through adn still a bit confused...I tried something like this

The Buffer code runs, but I still cant turn it off...am I close????

THANK YOU


            on(dom.byId("IDENTIFY"), "click", function () {
        initializeSidebar(app.map);

        //Clear Graphic Circle from BufferTool
        app.map.graphics.clear();
        clearContent();

        connect.disconnect(BufferTool(app.map));

            })

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

                app.map.infoWindow.hide();
                clearContent();

        mapOnClick = connect.connect(map, "onClick", BufferTool(app.map))

                // CLOSE THE PANE WHEN SELECTED
        dijit.byId("Tools").set('open',false); //Close


            })

Have you tried

    on(dom.byId("IDENTIFY"), "click", function () {
        initializeSidebar(app.map);

        //Clear Graphic Circle from BufferTool
        app.map.graphics.clear();
        clearContent();

        connect.disconnect(mapOnClick);

    })

and if you're using API 3.6 or higher, you should look at converting "connect.connect" to "on", since support for connect will be removed in Dojo 2.0

Re: Combine two Examples with Buttons to activate code

jaykapalczynski — Sun, 12 Dec 2021 16:28:22 GMT

I tried the below....I also tried defining mapOnClick outside the app.map.on
it just keeps running the Buffer code when i Click the map.

I am going to try and put a JSFiddle together.

            app.map.on("click", function () {
                app.map.infoWindow.hide();
                clearContent();
            });

            app.map.infoWindow.on("hide", clearContent);

            on(dom.byId("button1"), "click", function () {
                // I TRIED THIS
  initializeSidebar(app.map);
               // AND THIS
               var mapOnClick2 = connect.connect(app.map, "onClick", initializeSidebar(app.map))

  //Clear Graphic Circle from BufferTool
  app.map.graphics.clear();
  clearContent();

  dijit.byId("Tools").set('open',false); //Close

  // TRIED THIS
  connect.disconnect(mapOnClick);
  // AND THIS
  mapOnClick.remove();

            })

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

                app.map.infoWindow.hide();
                clearContent();

  var mapOnClick = connect.connect(app.map, "onClick", BufferTool(app.map))

                // CLOSE THE PANE WHEN SELECTED
  dijit.byId("Tools").set('open',false); //Close

            })

Re: Combine two Examples with Buttons to activate code

KenBuja — Sat, 11 Dec 2021 19:23:37 GMT

I tried the below....I also tried defining mapOnClick outside the app.map.on
it just keeps running the Buffer code when i Click the map.

I am going to try and put a JSFiddle together.

            app.map.on("click", function () {
                app.map.infoWindow.hide();
                clearContent();
            });

            app.map.infoWindow.on("hide", clearContent);

            on(dom.byId("button1"), "click", function () {
                // I TRIED THIS
        initializeSidebar(app.map);
               // AND THIS
               var mapOnClick2 = connect.connect(app.map, "onClick", initializeSidebar(app.map))

        //Clear Graphic Circle from BufferTool
        app.map.graphics.clear();
        clearContent();

        dijit.byId("Tools").set('open',false); //Close

        // TRIED THIS
        connect.disconnect(mapOnClick);
        // AND THIS
        mapOnClick.remove();

            })

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

                app.map.infoWindow.hide();
                clearContent();

        var mapOnClick = connect.connect(app.map, "onClick", BufferTool(app.map))

                // CLOSE THE PANE WHEN SELECTED
        dijit.byId("Tools").set('open',false); //Close

            })

What do you have in the BufferTool function? Are you still adding the event

app.map.on("click", function(evt)

If so, you'll have to disconnect that if you click the Identify button.

Re: Combine two Examples with Buttons to activate code

jaykapalczynski — Sat, 11 Dec 2021 19:23:39 GMT

This is long and I thank you very much for your eyes on this....its driving me nuts...

  function BufferTool(map){

        dialog = new TooltipDialog({
          id: "tooltipDialog",
          style: "position: absolute; width: 100px; font: normal normal normal 10pt Helvetica;z-index:100"
        });
        dialog.startup();


       // selection symbol used to draw the selected census block points within the buffer polygon
        var point = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          25,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([137, 214, 171, 0.9]),
            1
          ),
          new Color([137, 214, 171, 0.5])
        );

        app.map.on("load", function(){
          app.map.graphics.enableMouseEvents();
          app.map.graphics.on("mouse-out", closeDialog);
        });


        //listen for when the onMouseOver event fires on the countiesGraphicsLayer
        //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
        featureLayer.on("mouse-over", function(evt){
         var t = "<b>${SITENAME}</b><hr><b>Region: </b>${REGION}<br>";
          var content = esriLang.substitute(evt.graphic.attributes,t);
          var highlightGraphic = new Graphic(evt.graphic.geometry,point);
          app.map.graphics.add(highlightGraphic);

          dialog.setContent(content);

          domStyle.set(dialog.domNode, "opacity", 0.85);
          dijitPopup.open({
            popup: dialog,
            x: evt.pageX,
            y: evt.pageY
          });
        });


        // selection symbol used to draw the selected census block points within the buffer polygon
        var symbol2 = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
        featureLayer.setSelectionSymbol(symbol2);

        // change cursor to indicate features are click-able
        featureLayer.on("mouse-over", function () {
            app.map.setMapCursor("pointer");
        });

        featureLayer.on("mouse-out", function () {
            app.map.setMapCursor("default");
        });

        // Add the Feature Layer To Map
        app.map.addLayer(featureLayer);

        // geometry service that will be used to perform the buffer
        var geometryService = new GeometryService("https://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        //when the map is clicked create a buffer around the click point of the specified distance.
        app.map.on("click", function(evt){
          //define input buffer parameters
          var params = new BufferParameters();
          params.geometries  = [ evt.mapPoint ];
          params.distances = [ 10 ];
          params.unit = GeometryService.UNIT_STATUTE_MILE;

          geometryService.buffer(params);
        });

        geometryService.on("buffer-complete", function(result){
          app.map.graphics.clear();
          // draw the buffer geometry on the map as a map graphic
          var symbol2 = new SimpleFillSymbol(
            SimpleFillSymbol.STYLE_NULL,
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID,
              new Color([105,105,105]),
              2
            ),new Color([255,255,0,0.25])
          );
          var bufferGeometry = result.geometries[0]
          var graphic = new Graphic(bufferGeometry, symbol2);
          app.map.graphics.add(graphic);


 //Select features within the buffered polygon. To do so we'll create a query to use the buffer graphic
          //as the selection geometry.
          var query = new Query();
          query.geometry = bufferGeometry;
   // Select the Points within the Buffer and show them
          featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
          });
          // Query for the records with the given object IDs and populate the grid
          featureLayer.queryFeatures(query, function (featureSet) {
            updateGrid(featureSet);
          });

      });

 } // End Function BufferTool



      function closeDialog() {
          app.map.graphics.clear();
          dijitPopup.close(dialog);
        }

      function updateGrid(featureSet) {
        var data = arrayUtils.map(featureSet.features, function (entry, i) {
          return {
            NAME: entry.attributes.SITENAME,
            REGION: entry.attributes.REGION,
            WATERBODY: entry.attributes.WATERBODY,
            TYPE: entry.attributes.TYPE,
            ACCESSAREA: entry.attributes.ACCESSAREA,
            LOCATION: entry.attributes.LOCATION
          };
        });
        grid.store.setData(data);
        grid.refresh();
      }

    // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
        var markerSymbol = new SimpleMarkerSymbol();
        markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
        markerSymbol.setColor(new Color("#00FFFF"));
    // lineSymbol used for freehand polyline, polyline and line.
        var lineSymbol = new CartographicLineSymbol(
          CartographicLineSymbol.STYLE_SOLID,
          new Color([55,77,173,.75]), 1.5,
          CartographicLineSymbol.CAP_ROUND,
          CartographicLineSymbol.JOIN_MITER, 5
        );
    // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
    // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
 var fillSymbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([55,77,173,0.35]),
            2
          ),
          new Color([125,125,125,0.35])
        );


    // function toolbar
        function initToolbar() {
   alert("In initToolbar");

          tb = new Draw(map);
          tb.on("draw-end", addGraphic);
     // event delegation so a click handler is not
     // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
            if ( evt.target.id === "info" ) {
              return;
            }
            var tool = evt.target.id.toLowerCase();
            map.disableMapNavigation();
            tb.activate(tool);
          });
        }
    // add graphic
        function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics
          tb.deactivate();
          app.map.enableMapNavigation();

          // figure out which symbol to use
          var symbol;
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = markerSymbol;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = lineSymbol;
          }
          else {
            symbol = fillSymbol;
          }

          app.map.graphics.add(new Graphic(evt.geometry, symbol));
        }

Re: Combine two Examples with Buttons to activate code

KenBuja — Wed, 02 Apr 2014 18:45:51 GMT

Since you still connecting the click event in that function, you'll have to disconnect it.

Re: Combine two Examples with Buttons to activate code

jaykapalczynski — Sat, 11 Dec 2021 19:23:42 GMT

are you referring to this
Not sure how to disconnect it with it in the Buffer Function from a button click

        app.map.on("click", function(evt){
          //define input buffer parameters
          var params = new BufferParameters();
          params.geometries  = [ evt.mapPoint ];
          params.distances = [ 10 ];
          params.unit = GeometryService.UNIT_STATUTE_MILE;

          geometryService.buffer(params);
        });

Re: Combine two Examples with Buttons to activate code

jaykapalczynski — Sat, 11 Dec 2021 19:23:45 GMT

Should I add something like this??? I havent defined it so I am unsure what to disconnect in the button click

var BufferClick = connect.connect(map, "click", function(evt)){
          //define input buffer parameters
          var params = new BufferParameters();
          params.geometries  = [ evt.mapPoint ];
          params.distances = [ 10 ];
          params.unit = GeometryService.UNIT_STATUTE_MILE;

          geometryService.buffer(params);
        });

and then disconnect from the button click?

connect.disconnect(BufferClick );

Re: Combine two Examples with Buttons to activate code

jaykapalczynski — Sat, 11 Dec 2021 19:23:48 GMT

I am using the Map.On from the Buffer Button

var BufferClick = app.map.on("click", BufferTool(app.map));

which calls the Buffer Code, which in turn I am creating another Click event to define the Buffer Params

app.map.on("click", function(evt){

I have not defined the click event with a variable in the Buffer Code so I am unsure how to do this and then disconnect.
Back in the Identify button I need to disconnect this Click event that sets the Buffer Parameters.

Stuck here.

Could or should I do this? And then attempt to disconnect the BufferClick in the Identify button click?

var BufferClick = app.map.on("click", function(evt){
          //define input buffer parameters
          var params = new BufferParameters();
          params.geometries  = [ evt.mapPoint ];
          params.distances = [ 10 ];
          params.unit = GeometryService.UNIT_STATUTE_MILE;

          geometryService.buffer(params);
 });

Then disconnect in the Identify button?

BufferClick.Remove();

so confused here

Re: Combine two Examples with Buttons to activate code

KenBuja — Sat, 11 Dec 2021 19:23:50 GMT

You'll have to declare the variable BufferClick outside the BufferTool function so that it can be referred in other functions (read up on variable scope). Something like

var map;
var BufferClick;

require(["esri/map", etc

    function BufferTool(map) { //although if you declared map outside the require, you don't need to pass it like this
         // code for function
       
        //when the map is clicked create a buffer around the click point of the specified distance.
        BufferClick = app.map.on("click", function(evt){
          //define input buffer parameters
          var params = new BufferParameters();
          params.geometries  = [ evt.mapPoint ];
          params.distances = [ 10 ];
          params.unit = GeometryService.UNIT_STATUTE_MILE;

          geometryService.buffer(params);
        });
          
        // rest of code in function

Re: Combine two Examples with Buttons to activate code

jaykapalczynski — Sun, 12 Dec 2021 16:28:25 GMT

This is all my code OUTSIDE the Buffer Function....Still dont know where I should be disconnecting from the BufferClick in the Buffer Code....
I had that code that you showed in your example....but dont know what to write in regards to the IDENTIFY Button to disconnect the BufferClick

    var tb;
    var app = {};
    var BufferClick;

    require([
        "dojo/ready",
        "dojo/on",
        "dojo/_base/connect",
        "dojo/dom",
        "dojo/dom-construct",
        "dojo/parser",
        "dijit/registry",
        "esri/layers/FeatureLayer",
     "esri/layers/ArcGISDynamicMapServiceLayer",
     "esri/InfoTemplate",
        "esri/renderers/UniqueValueRenderer",
        "esri/renderers/SimpleRenderer",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane",
  "esri/map",
  "esri/toolbars/draw",
        "esri/symbols/SimpleFillSymbol",
        "esri/tasks/query", "esri/tasks/QueryTask",
        "esri/tasks/GeometryService", "esri/tasks/BufferParameters",
        "esri/TimeExtent", "dojo/number", "dojo/date/locale",
        "dojo/store/Memory", "dgrid/OnDemandGrid",
        "esri/lang", "dojo/dom-style", "dijit/TooltipDialog", "dijit/popup",
        "dojo/_base/Color", "esri/graphic",
        "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",

  "esri/dijit/BasemapGallery",
  "esri/dijit/BasemapToggle",
  "esri/request",
  "esri/config",
        "dojo/_base/array",
  "esri/dijit/Print",
  "esri/tasks/PrintTemplate",
  "esri/arcgis/utils",
  "esri/domUtils",
  "esri/dijit/Popup",
  "dojo/domReady!"
    ], function(
        ready,
        on,
        connect,
        dom,
        domConstruct,
        parser,
        registry,
        FeatureLayer,
    ArcGISDynamicMapServiceLayer,
    InfoTemplate,
  UniqueValueRenderer,
     SimpleRenderer,
     SimpleMarkerSymbol,
     SimpleLineSymbol,
        BorderContainer,
        ContentPane,
        Map,
 Draw,
        SimpleFillSymbol,
        Query, QueryTask,
        GeometryService, BufferParameters,
        TimeExtent, number, locale,
        Memory, OnDemandGrid,
        esriLang, domStyle, TooltipDialog, dijitPopup,
        Color, Graphic,
        PictureFillSymbol, CartographicLineSymbol,
        BasemapGallery,
        BasemapToggle,
        esriRequest,
        esriConfig,
        arrayUtils,
        Print,
        PrintTemplate,
        arcgisUtils,
        domUtils,
        Popup
    ) {

    parser.parse();

    //setup event handlers for the next/previous buttons
    on(dom.byId("previous"), "click", selectPrevious);
    on(dom.byId("next"), "click", selectNext);

    esri.config.defaults.io.proxyUrl = "https://fwis.gov/proxypage_net/proxy.ashx";

    app.map = new esri.Map("map", {
       basemap: "topo",
       center: [-77.4329, 37.5410],
       zoom: 7,
       slider: false,
       showAttribution:false,
       logo: false
    });


    app.map.infoWindow.set("popupWindow", false);


            app.map.on("click", function () {
                app.map.infoWindow.hide();
                clearContent();
            });

            app.map.infoWindow.on("hide", clearContent);

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

  initializeSidebar(app.map);
  //Clear Graphic Circle from BufferTool
  app.map.graphics.clear();
  clearContent();

  dijit.byId("Tools").set('open',false); //Close

  BufferClick.Remove();
            })

            on(dom.byId("BUFFER"), "click", function () {
  dom.byId("featureCount").innerHTML = "Click Identify Tool to select feature(s)";
                featureLayer0.setInfoTemplate(null);
                featureLayer1.setInfoTemplate(null);

                app.map.infoWindow.hide();
                clearContent();

  app.map.on("click", BufferTool(app.map));

                // CLOSE THE PANE WHEN SELECTED
  dijit.byId("Tools").set('open',false); //Close

            })

Re: Combine two Examples with Buttons to activate code

jaykapalczynski — Sat, 11 Dec 2021 19:23:53 GMT

HERE Is all the Buffer Code...REST OF CODE in previous post

  function BufferTool(map){

        dialog = new TooltipDialog({
          id: "tooltipDialog",
          style: "position: absolute; width: 100px; font: normal normal normal 10pt Helvetica;z-index:100"
        });
        dialog.startup();


       // selection symbol used to draw the selected census block points within the buffer polygon
        var point = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          25,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([137, 214, 171, 0.9]),
            1
          ),
          new Color([137, 214, 171, 0.5])
        );

        app.map.on("load", function(){
          app.map.graphics.enableMouseEvents();
          app.map.graphics.on("mouse-out", closeDialog);
        });


        //listen for when the onMouseOver event fires on the countiesGraphicsLayer
        //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
        featureLayer.on("mouse-over", function(evt){
         var t = "<b>${SITENAME}</b><hr><b>Region: </b>${REGION}<br>";
          var content = esriLang.substitute(evt.graphic.attributes,t);
          var highlightGraphic = new Graphic(evt.graphic.geometry,point);
          app.map.graphics.add(highlightGraphic);

          dialog.setContent(content);

          domStyle.set(dialog.domNode, "opacity", 0.85);
          dijitPopup.open({
            popup: dialog,
            x: evt.pageX,
            y: evt.pageY
          });
        });

        // selection symbol used to draw the selected census block points within the buffer polygon
        var symbol2 = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
        featureLayer.setSelectionSymbol(symbol2);

        // change cursor to indicate features are click-able
        featureLayer.on("mouse-over", function () {
            app.map.setMapCursor("pointer");
        });

        featureLayer.on("mouse-out", function () {
            app.map.setMapCursor("default");
        });

        // Add the Feature Layer To Map
        app.map.addLayer(featureLayer);

        // geometry service that will be used to perform the buffer
        var geometryService = new GeometryService("https://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

 BufferClick = app.map.on("click", function(evt){
          //define input buffer parameters
          var params = new BufferParameters();
          params.geometries  = [ evt.mapPoint ];
          params.distances = [ 10 ];
          params.unit = GeometryService.UNIT_STATUTE_MILE;

          geometryService.buffer(params);
        });

        geometryService.on("buffer-complete", function(result){
          app.map.graphics.clear();
          // draw the buffer geometry on the map as a map graphic
          var symbol2 = new SimpleFillSymbol(
            SimpleFillSymbol.STYLE_NULL,
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID,
              new Color([105,105,105]),
              2
            ),new Color([255,255,0,0.25])
          );
          var bufferGeometry = result.geometries[0]
          var graphic = new Graphic(bufferGeometry, symbol2);
          app.map.graphics.add(graphic);


 //Select features within the buffered polygon. To do so we'll create a query to use the buffer graphic
          //as the selection geometry.
          var query = new Query();
          query.geometry = bufferGeometry;
   // Select the Points within the Buffer and show them
          featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
          });
          // Query for the records with the given object IDs and populate the grid
          featureLayer.queryFeatures(query, function (featureSet) {
            updateGrid(featureSet);
          });


      });

 } // End Function BufferTool



      function closeDialog() {
          app.map.graphics.clear();
          dijitPopup.close(dialog);
        }

      function updateGrid(featureSet) {
        var data = arrayUtils.map(featureSet.features, function (entry, i) {
          return {
            NAME: entry.attributes.SITENAME,
            REGION: entry.attributes.REGION,
            WATERBODY: entry.attributes.WATERBODY,
            TYPE: entry.attributes.TYPE,
            ACCESSAREA: entry.attributes.ACCESSAREA,
            LOCATION: entry.attributes.LOCATION
          };
        });
        grid.store.setData(data);
        grid.refresh();
      }

    // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
        var markerSymbol = new SimpleMarkerSymbol();
        markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
        markerSymbol.setColor(new Color("#00FFFF"));
    // lineSymbol used for freehand polyline, polyline and line.
        var lineSymbol = new CartographicLineSymbol(
          CartographicLineSymbol.STYLE_SOLID,
          new Color([55,77,173,.75]), 1.5,
          CartographicLineSymbol.CAP_ROUND,
          CartographicLineSymbol.JOIN_MITER, 5
        );
    // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
    // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
 var fillSymbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([55,77,173,0.35]),
            2
          ),
          new Color([125,125,125,0.35])
        );


    // function toolbar
        function initToolbar() {
   alert("In initToolbar");

          tb = new Draw(map);
          tb.on("draw-end", addGraphic);
     // event delegation so a click handler is not
     // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
            if ( evt.target.id === "info" ) {
              return;
            }
            var tool = evt.target.id.toLowerCase();
            map.disableMapNavigation();
            tb.activate(tool);
          });
        }
    // add graphic
        function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics
          tb.deactivate();
          app.map.enableMapNavigation();

          // figure out which symbol to use
          var symbol;
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = markerSymbol;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = lineSymbol;
          }
          else {
            symbol = fillSymbol;
          }

          app.map.graphics.add(new Graphic(evt.geometry, symbol));
        }

Re: Combine two Examples with Buttons to activate code

jaykapalczynski — Thu, 03 Apr 2014 11:15:22 GMT

I know I am skating all around the solution but just cant seem to figure it out...all your help is appreciated.
Just trying to disconnect from the "BufferClick" when I click the IDENTIFY button....it keeps running the buffer code ....

****If I use the Buffer Tool via the Buffer Button the code runs...If I go back and click the IDENTIFY button it does not run the Buffer Code but the Identify is no longer working?

PLEASE refer to the last two posts above....

Re: Combine two Examples with Buttons to activate code

KenBuja — Thu, 03 Apr 2014 13:28:47 GMT

Could you put together a Fiddle that's a simplified version of this that replicates the problem?

Re: Combine two Examples with Buttons to activate code

jaykapalczynski — Thu, 03 Apr 2014 15:56:12 GMT

Here is a JSFiddle.....I tried to make as simple as possible....

1. When you open it you can click to "Tools" this will drop the pane down and expose the IDENTIFY and BUFFER buttons
2. Click the IDENTIFY tool and you should be able to click the Green Graphics and display data in the left pane
3. Now click on the BUFFER tool....and try and click near one of the Green graphics again....it should run the Buffer Code but does not....you need to refresh the page...
4. after refreshing the page go into the BUFFER button and then click near a green graphic...the code will run....
5. then go back and click the IDENTIFY button....nothing happens.

http://jsfiddle.net/Jaykapalczynski/n7yux/20/

Hope you can help out...I really appreciate your help here....