Hi everyone,
I need to buffer a point on button click instead of map click in ArcGIS JavaScript api. How do I make the make the point buffer on button click?
Thanks,
Aditi
Hi Aditi,
Below is an example on how you can buffer a feature using a button:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--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>Sample Map</title> <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css"> <style> html, body, #mapDiv { padding:0; margin:0; height:100%; } #button{ position: absolute; top: 50px; left: 100px; z-index: 5; } </style> <script src="http://js.arcgis.com/3.12/"></script> <script> var map, graphic; require([ "esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol", "esri/geometry/Point", "esri/graphic", "dojo/_base/Color", "esri/symbols/SimpleLineSymbol", "esri/tasks/GeometryService", "esri/tasks/BufferParameters", "esri/SpatialReference", "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/parser", "dojo/domReady!" ], function( Map, FeatureLayer, SimpleMarkerSymbol, SimpleFillSymbol, Point, Graphic, Color, SimpleLineSymbol, GeometryService, BufferParameters, SpatialReference, dom, on, array, parser ) { parser.parse(); map = new Map("mapDiv", { basemap: "streets", center: [-81.792107, 26.150807], zoom: 8 }); gs = new GeometryService("http://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0",{ mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); var symbol = 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]) ); on(featureLayer, "click", function(evt){ map.graphics.clear(); xloc = evt.graphic.geometry.x; yloc = evt.graphic.geometry.y; var pt = new Point(xloc,yloc,map.spatialReference) graphic = new Graphic(pt, symbol); map.graphics.add(graphic); }) map.addLayer(featureLayer); on(dom.byId("buffer"), 'click', function(evt){ var params = new BufferParameters(); params.distances = [10]; params.bufferSpatialReference = map.spatialReference; params.outSpatialReference = map.spatialReference; params.unit = GeometryService.UNIT_STATUTE_MILE console.log(graphic); params.geometries = [graphic.geometry]; console.log(params); gs.buffer(params, showBuffer); }) function showBuffer(bufferedGeometries) { console.log(bufferedGeometries); var symbol = new SimpleFillSymbol("none", new SimpleLineSymbol("dashdot", new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])); array.forEach(bufferedGeometries, function (geometry) { graphic = new Graphic(geometry, symbol); map.graphics.add(graphic); }); } }); </script> </head> <body class='claro'> <div id="mapDiv"> <div id="button"> <button data-dojo-type="dijit/form/Button" id='buffer'>Buffer</button> </div> </div> </body> </html>