Not Able To See Buffer on Click Event On Graphics Layer

Question

Using ArcGIS JavaScript API 3.21 and This Demo Fiddle I am trying to create a bufferd area on click event but apparently this is not showing any graphic on bufferLayer graphics Layer

require([
 "esri/map",
 "esri/SpatialReference",
 "esri/graphic",
 "esri/layers/GraphicsLayer",
 "esri/Color", 
 "esri/geometry/Point",
 "esri/geometry/geometryEngine",
 "esri/symbols/SimpleMarkerSymbol",
 "esri/symbols/SimpleLineSymbol", 
 "esri/symbols/SimpleFillSymbol", 
 "esri/renderers/SimpleRenderer",
 "dojo/domReady!"
], function(
 Map,
 SpatialReference,
 Graphic,
 GraphicsLayer,
 Color,
 Point,
 geometryEngine,
 SimpleMarkerSymbol, 
 SimpleLineSymbol, 
 SimpleFillSymbol, 
 SimpleRenderer
) {
 var map = new Map("map", {
 basemap: "streets", 
 center: [-122.4, 37.785],
 zoom: 14, 
 });
 var buffSymb = new SimpleFillSymbol(
 SimpleFillSymbol.STYLE_NULL,
 new SimpleLineSymbol(
 SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
 new Color([105, 105, 105]),
 2
 ), new Color([255, 255, 0, 0.25])
 );
 var graphicsLayer = new GraphicsLayer();
 var bufferLayer = new GraphicsLayer();
 map.addLayer(graphicsLayer);
 map.on("click", function(evt){
 var buffer = geometryEngine.geodesicBuffer(
 new Point(evt.mapPoint.x, evt.mapPoint.y),
 1000,
 "meters"
 );
 bufferLayer.add(new Graphic(buffer, buffSymb));
 map.addLayer(bufferLayer);
 });
});

I am not getting any error message but also no result back! can you please take a look at this and let me know what I am doing wrong?

Answer 1

You give to the geodesicBuffer function, a new Point without specifying its spatial reference, while you could just give evt.mapPoint which is already a Point :

var buffer = geometryEngine.geodesicBuffer(
 evt.mapPoint,
 1000,
 "meters"
);

Then, you add the bufferLayer everytime the user clicks on the map, you should add it to the map, at the start of your app :

var graphicsLayer = new GraphicsLayer();
var bufferLayer = new GraphicsLayer();
map.addLayers([graphicsLayer, bufferLayer]);
map.on("click", function(evt) {
 var buffer = geometryEngine.geodesicBuffer(
 evt.mapPoint,
 1000,
 "meters"
 );
 var graphic = new Graphic(buffer, buffSymb);
 bufferLayer.add(graphic);
});