"Buffer Point" function/sample inserted in Web App ?

[EricPollard2]

Hello,
I am trying to use the "Buffer Point" function. I am trying to use it in much the same way the sample works in the Javascript API samples area on the resource center (http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/util_buffer.html). I am hoping to be able to have the user click on a newly created 'Buffer' button, then click on the map in any location, and the ring graphic will appear, having buffered the point by my specified distances (set in the array).

I have downloaded the 'basic viewer' web app from ArcGIS Online (javascript) and am tweaking it with my limited knowledge of programming. I have used the "print" button section of the code to convert to this function, changed the png/title/label etc for it and made it a "toggleButton" so that it can be toggled much the same way the 'Measure' tool is toggled. I have also changed the array to the three distances I want to buffer by. The button now looks right, and can be clicked on and off. From here I am lost. I need to somehow link the button to the buffering function and function to show the buffer graphics (from the sample). In the sample, it seems to call up a new map when it is initialized, but I need for the arcgis map that my app is based on to stay in the map frame, and be able to be panned/zoomed/etc before and after the buffer is created by the user. I am also hoping to have the 'toggleButton' essentially switch on and off the buffering "ability" of the application.

To make this more simple, if anyone can show me how to essentially add the 'buffer point' sample from the sample area in the Resource Center API help (link above) to a standard web app downloaded from ArcGIS Online (in javascript), then I can probably figure out how to insert it in my app specifically.

Thank you so much to anyone who can help!! Been struggling with this for many hours.
-Eric

[KellyHutchins · Accepted solution]

Eric,

Here's a function that adds a toggle button for a buffer tool to the Basic Viewer toolbar. When the button is active we enable the draw toolbar so that users can click a point on the map to be buffered. Since its a toggle button the buffer tool is active and users can keep clicking points until the tool is deactivated. You'll need to add the dojo.require statement to the top of the javascript file (with the others) in order for the draw toolbar (used to draw the point) to work.

dojo.require("esri.toolbars.draw")

function addBufferTool(){     var toggleButton = new dijit.form.ToggleButton({      label: 'Buffer',      title: 'Buffer',       id: "bufferButton"    });      var tb = new esri.toolbars.Draw(map);        //After the user draws a point on the map define the buffer parameters and execute the buffer task     dojo.connect(tb, "onDrawEnd", function(geometry){     //define the buffer parameters      map.graphics.clear();        var params = new esri.tasks.BufferParameters();              params.distances = [5,10];       params.unit = esri.tasks.GeometryService.UNIT_KILOMETER;              params.outSpatialReference = map.spatialReference;       params.bufferSpatialReference = new esri.SpatialReference({wkid: 4326});        params.geometries = [esri.geometry.webMercatorToGeographic(geometry)];                //Execute the buffer task and when it successfully completes draw the results on the map        esri.config.defaults.geometryService .buffer(params, function(bufferedGeometries){        dojo.forEach(bufferedGeometries, function(geometry) {           var graphic = new esri.Graphic(geometry,new esri.symbol.SimpleFillSymbol());             map.graphics.add(graphic);         });       });           });        //When the toggle button is active enable the draw toolbar. When it's not active deactivate the toolbar     dojo.connect(toggleButton, "onClick", function () {    //clear any existing buffer graphics      map.graphics.clear();     //enable or disable the draw toolbar      if(toggleButton.checked){         //activate the toolbar           tb.activate(esri.toolbars.Draw.POINT);             }else{         //deactivate the toolbar          tb.deactivate();     }               });     dojo.byId('webmap-toolbar-center').appendChild(toggleButton.domNode); } 

[EricPollard2]

Thank you so much !! This has helped me complete my application. I tweaked it slightly, changing the picture/lablel/title etc. I also removed the 'map.graphics.clear();' from the togglebutton so that I can still click on new locations to clear the graphics and draw a new buffer, but now I can uncheck the rings togglebutton and leave the buffer graphic on the map to allow users to click on features within the map while the buffer graphic is present. To clear this buffer graphic, the user either clicks on a new location to buffer, or uses the search bar to search for a location or just a blank search !! Works great, thanks again !
-Eric