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);
});