Combine two Examples with Buttons to activate code

5173
39
Jump to solution
04-01-2014 08:18 AM
jaykapalczynski
Honored Contributor
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));
        }
0 Kudos
39 Replies
jaykapalczynski
Honored Contributor
Like this:

BufferTool(map)


About passing the parameters: In this line?

action2 = on.pausable(app.map, "click", function(DECLARE VARIABLES HERE?) {


 on(dojo.byId('btnAction2'), "click", function () {
         if (action1 != undefined) {
             action1.pause();
         }
         if (action2 == undefined) {
      action2 = on.pausable(app.map, "click", function(geometryService.buffer(params)) {
                
                 var params = new BufferParameters();
                 params.geometries  = [ evt.mapPoint ];
                 params.distances = [ 10 ];
                 params.unit = GeometryService.UNIT_STATUTE_MILE

                BufferTool(map);

             });
         }
         else {
             action2.resume();
         }
    });


OR am i close?

 on(dojo.byId('btnAction2'), "click", function () {
         if (action1 != undefined) {
             action1.pause();
         }
         if (action2 == undefined) {
      action2 = on.pausable(app.map, "click", function(evt) {
                
                 var params = new BufferParameters();
                 params.geometries  = [ evt.mapPoint ];
                 params.distances = [ 10 ];
                 params.unit = GeometryService.UNIT_STATUTE_MILE

                BufferTool(map, geometryService.buffer(params));

             });
         }
         else {
             action2.resume();
         }
    });
0 Kudos
jaykapalczynski
Honored Contributor
GOT IT!!! Thanks to both of you for your help...greatly appreciated....learning here....

Call to the BufferTool Function with this...passing the Buffer Params to the Function
   on(dojo.byId('btnAction2'), "click", function () {
         if (action1 != undefined) {
             action1.pause();
         }
         if (action2 == undefined) {
      action2 = on.pausable(app.map, "click", function(evt) {

                 var params = new BufferParameters();
        params.geometries  = [ evt.mapPoint ];
        params.distances = [ 10 ];
        params.unit = GeometryService.UNIT_STATUTE_MILE;
                     // COMMENT out the below and make the call in the Buffer Function
       //geometryService.buffer(params);

                 BufferTool(map, params);  // Pass the map and the params to the Buffer Function
             });
         }
         else {
             action2.resume();
         }
    });


In my BufferTool Function I commented out the Buffer params and grabbed the params sent to the function

 function BufferTool(map, params){

// ...SNIP OF CODE REMOVED

        //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.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);
0 Kudos
jaykapalczynski
Honored Contributor
OOPS ... ONE LAST THOUGHT ON THIS.

When I click the button I does run the Query and Buffer and returns the correct results...

BUT I cannot run it again for some reason....ANY THOUGHTS?

http://jsfiddle.net/Jaykapalczynski/TwBLZ/10/
0 Kudos
jaykapalczynski
Honored Contributor
I narrowed my issue down to the DIALOG:  I had thsi just inside the buffer code....it was part of the SNIP in a couple posts ago....

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


This is allowing the user to hover over the graphics and retrieve a popup with some information.  If I remove it I can continually click the map and run the buffers...if I put the code back in and refresh I can only run the code once. 

I am figuring that I need to stop the dialog after each run through the Buffer?  Not sure....Any thoughts? 

Do I need to Shut it down each pass through the Buffer Code?  Clear it?  hmmmmm
0 Kudos
jaykapalczynski
Honored Contributor
I regards to my last post with the "Dialog"

Here is a JFiddle of the project.
http://jsfiddle.net/Jaykapalczynski/TwBLZ/17/

Please see lines 208 - 214 in the java script. 

If you click in the map near the east shore along the main rivers you will get a return data set....they are boat ramps being returned....

1. Comment the DIALOG code out (as it is now) you can activate the buffer tool and click multiple times in the map and the buffer will run....
2. Uncomment the DIALOG code and you can only click the map once and run the buffer....

What is causing this...do I need to stop the Dialog and restart each time?  Declare somewhere else?
0 Kudos
JonathanUihlein
Esri Regular Contributor
If you look at the console (which you should always do), you will see the following error message:
"Error: Tried to register widget with id==tooltipDialog but that id is already registered"

This means that you are trying to create a new tooltip without destroying the old one.
Basically, you need to destroy the old tooltip before creating a new one.
0 Kudos
jaykapalczynski
Honored Contributor
Thank you Jon...still learning here...good lesson for me....I will start looking at the console for error trapping....forgot about it.
0 Kudos
jaykapalczynski
Honored Contributor
I placed the DIALOG outside the Function until i figure out how to destroy the dialog...
0 Kudos
JonathanUihlein
Esri Regular Contributor
dialog.destroy();

If you aren't sure what methods a class has, always refer to the documentation.
I cannot say this enough times.

9 times out of 10, one can find the answer to their question by reading the manual.

http://dojotoolkit.org/api/?qs=1.9/dijit/TooltipDialog
0 Kudos
jaykapalczynski
Honored Contributor
Thank you all....VERY Appreciated.
0 Kudos