Sai,
Here is the sample updated to use AMD style and adding mouse over editing to the buffers.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Buffer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<script src="https://js.arcgis.com/3.20/"></script>
<script>
var map = null,
gsvc = null,
clickHandler = null,
editingEnabled = false,
bufferGL = null;
require([
"esri/map",
"esri/toolbars/edit",
"esri/graphic",
"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dojo/_base/array",
"dojo/_base/lang",
"dojo/on",
"esri/tasks/GeometryService",
"esri/tasks/BufferParameters",
"esri/layers/GraphicsLayer",
"dojo/domReady!"
], function(
Map, Edit, Graphic, Color,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
arrayUtils, lang, on, GeometryService, BufferParameters, GraphicsLayer
) {
map = new Map("map", {
basemap: "streets",
center: [-96.935, 32.872],
zoom: 9
});
var editToolbar = new Edit(map);
gsvc = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
clickHandler = on.pausable(map, "click", doBuffer);
bufferGL = new GraphicsLayer({opacity: 0.7});
map.addLayer(bufferGL);
bufferGL.on("mouse-over", function(evt){
clickHandler.pause();
if (editingEnabled === false) {
editingEnabled = true;
editToolbar.activate(Edit.MOVE , evt.graphic);
} else {
editToolbar.deactivate();
editingEnabled = false;
}
});
bufferGL.on("mouse-out", function(evt){
clickHandler.resume();
editToolbar.deactivate();
editingEnabled = false;
});
editingEnabled = false;
function doBuffer(evt) {
map.graphics.clear();
var params = new BufferParameters();
params.geometries = [evt.mapPoint];
params.distances = [10];
params.unit = GeometryService.UNIT_KILOMETER;
params.outSpatialReference = map.spatialReference;
gsvc.buffer(params, showBuffer);
}
function showBuffer(geometries) {
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([0, 0, 255, 0.65]), 2
),
new Color([0, 0, 255, 0.35])
);
arrayUtils.forEach(geometries, function(geometry) {
var graphic = new Graphic(geometry, symbol);
bufferGL.add(graphic);
});
}
});
</script>
</head>
<body class="claro">
<b>Click a location on the map to buffer. Click again on another location to buffer again.</b>
<div id="map" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>
</html>