labs/jsapi/buffer_with_geometry_engine/index.html

<!DOCTYPE html>
<html>
<head>
  <title>Buffer with GeometryEngine</title>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">

  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script src="https://js.arcgis.com/4.11/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/GraphicsLayer",
      "esri/Graphic",
      "esri/symbols/SimpleFillSymbol",
      "esri/geometry/geometryEngine",
      "dojo/domReady!"
    ], function(Map, MapView,
                GraphicsLayer, Graphic, SimpleFillSymbol, geometryEngine) {
      
	  var map = new Map({
        basemap: "dark-gray-vector"
      });
      
	  var view = new MapView({
        container: "viewDiv",
        map: map,
		center: [-77.029, 38.89],
        zoom: 10
      });
      // Add a layer to show the calculated buffer, and a layer for the buffer source data.
      var bufferLayer = new GraphicsLayer();
      
	  map.add(bufferLayer);
      
	  // Configure the output buffer.
	  var bufferSymbol = new SimpleFillSymbol({
        color: [0,100,255,0.4],
        style: "solid",
        outline: {
          color: [110,110,110],
          width: 1
        }
      });
	  
	  var pointSym = {
        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
        color: [255, 0, 0],
        outline: {
          color: [255, 255, 255],
          width: 1
        },
        size: 7
      };
      
	  // Buffer the view's contents
	  view.on("click", function(event) {
        bufferPoint(event.mapPoint);
      });
	  
	  function bufferPoint(point) {
        bufferLayer.add(new Graphic({
          geometry: point,
          symbol: pointSym
        }));

        var buffer = geometryEngine.geodesicBuffer(point, 1, "miles");
        bufferLayer.add(new Graphic({
          geometry: buffer,
          symbol: bufferSymbol
        }));
      }
    });
  </script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>