Buffer Any Shape

by Alex Azuero

HTML

<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
<script src="http://js.arcgis.com/3.10/"></script>
<title>Buffer Any Shape</title>
<body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters:'true', design:'sidebar'" style="width:100%;height:100%;">
        <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
        <div id="leftPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'">
            <div class="details">Pick a tool and draw on the map. The drawn graphic will be buffered based on the specified parameters.</div>
            <button data-dojo-type="dijit.form.Button" onclick="app.tb.activate(esri.toolbars.Draw.LINE);app.map.hideZoomSlider();">Line</button>
            <button data-dojo-type="dijit.form.Button" onclick="app.tb.activate(esri.toolbars.Draw.POLYLINE);app.map.hideZoomSlider();">Polyline</button>
            <button data-dojo-type="dijit.form.Button" onclick="app.tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);app.map.hideZoomSlider();">Freehand Polyline</button>
            <br />
            <button data-dojo-type="dijit.form.Button" onclick="app.tb.activate(esri.toolbars.Draw.POLYGON);app.map.hideZoomSlider();">Polygon</button>
            <button data-dojo-type="dijit.form.Button" onclick="app.tb.activate(esri.toolbars.Draw.FREEHAND_POLYGON);app.map.hideZoomSlider();">Freehand Polygon</button>
            <br />
            <hr />
            <div><b>Buffer Parameters</b>

            </div>Spatial Reference WKID:
            <input type="text" id="bufferSpatialReference" size="5" value="2157" />
            <br />Distance:
            <input type="text" id="distance" size="5" value="25" />
            <select id="unit" style="width:100px;">
                <option...

CSS

html, body {
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
         overflow:hidden;
     }
     #leftPane {
         color:#000;
         width:250px;
         padding-bottom:15px;
     }
     #map {
         padding:0;
     }
     .details {
         font-size:14px;
         font-weight:600;
         padding-bottom:20px;
     }

JavaScript

require(["dojo/dom",
      "dojo/dom-attr",
      "dojo/_base/array",
      "esri/Color",
      "dojo/parser",
      "esri/config",
      "esri/map",
      "esri/graphic",
      "esri/tasks/GeometryService",
      "esri/tasks/BufferParameters",
      "esri/toolbars/draw",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane"],

  function (dom, domAttr, array, Color, parser, esriConfig, Map, Graphic, GeometryService, BufferParameters, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) {
      var map, gsvc, tb;
      parser.parse();
      map = new Map("map", {
          basemap: "streets",
          center: [-8, 53],
          zoom: 7
      });
      map.on("load", initToolbar);

      gsvc = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

      esriConfig.defaults.io.proxyUrl = "/proxy";
      esriConfig.defaults.io.alwaysUseProxy = false;

      function initToolbar(evtObj) {
          app.tb = new Draw(evtObj.map);
          app.tb.on("draw-end", doBuffer);
      }

      function doBuffer(evtObj) {
          var geometry = evtObj.geometry,
              map = app.map,
              gsvc = app.gsvc;
          switch (geometry.type) {
              case "point":
                  var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25]));
                  break;
              case "polyline":
                  var symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1);
                  break;
              case "polygon":
                  var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0,...