develop/jsapi/buffer_with_geometry_engine/index.html

<!DOCTYPE html>
<html>
<head>
  <title>Buffer Stops 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.0/esri/css/main.css">

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

  <!-- need to figure out why this sample doesn't work at 4.1 -->
  <script src="https://js.arcgis.com/4.0/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/GraphicsLayer",
      "esri/layers/FeatureLayer",
      "esri/Graphic",
      "esri/symbols/SimpleFillSymbol",
      "esri/geometry/geometryEngineAsync",
      "dojo/domReady!"
    ], function(Map, MapView,
                GraphicsLayer, FeatureLayer, Graphic, SimpleFillSymbol, geometryEngineAsync) {

      var map = new Map({
        basemap: "dark-gray"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-122.68, 45.52],
        zoom: 12
      });

      // Add a layer to show the calculated buffer, and a layer for the buffer source data.
      var bufferLayer = new GraphicsLayer();
      var stopsLayer = new FeatureLayer({
        url : "http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Rail_Stops_Styled/FeatureServer/0"
      });

      map.addMany([bufferLayer, stopsLayer]);

      // Configure the output buffer.
      var bufferSymbol = new SimpleFillSymbol({
        color: [0,100,255,0.4],
        style: "solid",
        outline: {
          color: [110,110,110],
          width: 1
        }
      });

      // Buffer the view's contents
      view.whenLayerView(stopsLayer).then(function(stopsLayerView) {
        stopsLayerView.watch("updating", function(isUpdating) {
          if (!isUpdating) {
            stopsLayerView.queryFeatures().then(function(stopGraphics) {
              // We need geometries, not graphics for the buffer operation.
              var stops = stopGraphics.map(function(stopGraphic) {
                return stopGraphic.geometry;
              });
              // Buffer and union all the points in the layer view.
              geometryEngineAsync.geodesicBuffer(stops, 0.5, "miles", true).then(function(totalBuffer) {
                // Display the unioned buffer on the map.
                bufferLayer.removeAll();
                bufferLayer.add(new Graphic({
                  geometry: totalBuffer[0],
                  symbol: bufferSymbol
                }));
              });
            });
          }
        });
      });

    });
  </script>
</head>

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