topic Re: Drawing Tool with Buffer not working in my project in ArcGIS JavaScript Maps SDK Questions

Drawing Tool with Buffer not working in my project

BrianPaulson1 — Sat, 11 Dec 2021 21:59:09 GMT

I am new to Javascript API. I have a project where I am trying to get the drawing toolbar with buffer to work exactly like this Geometry Service - Buffer | ArcGIS API for JavaScript in my project. I got the buttons added and thought I added all the functions, but when I click on the buttons, nothing is happening. I am sure I am missing something simple, but I haven't been able to figure it out. I would greatly appreciate any help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the
    samples on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Flickr</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #rightPane {
      color: #000;
      width: 250px;
      padding-bottom: 15px;
    }

    .details {
      font-size: 14px;
      font-weight: 600;
      padding-bottom: 20px;
    }

    button1 {
      margin: 2px;
      cursor: pointer;
    }

    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 60px;
    }

    .esriScalebar {
      padding: 20px 20px;
    }

    #map {
      padding: 0;
    }

    .dgrid {
      border: none;
      height: 100%;
    }

    .dgrid-column-0 {
      width: 35px;
    }

    .dgrid-row-odd {
      background: #FFFDF3;
    }

    td div img:hover {
      cursor: pointer;
    }

    #titlePane {
      width: 240px;
    }

    .claro .dijitTitlePaneTitle {
      background: #fff;
      font-weight: 600;
      border: none;
      border-bottom: solid 1px #29201A;
      border-top: solid 1px #29201A;
    }

    .claro .dijitTitlePaneTitleHover {
      background: #eee;
    }

    .claro .dijitTitlePaneTitleActive {
      background: #808775;
    }

    .claro .dijitTitlePaneContentOuter {
      border-right: none;
      border-bottom: none;
      border-left: none;
    }
  </style>
  <!--<script>
    var dojoConfig = {
      parseOnLoad: true
    };
  </script>-->
  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
    var map, geocoder, grid, tb;
    require([
        "esri/map",
        "esri/InfoTemplate",
        "esri/dijit/Geocoder",
        "esri/graphic",
        "dojo/query",
        "esri/config",
        "esri/geometry/normalizeUtils",
        "esri/tasks/GeometryService",
        "esri/tasks/BufferParameters",
        "esri/toolbars/draw",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/dijit/Measurement",
        "esri/layers/FeatureLayer",
        "esri/dijit/PopupTemplate",
        "esri/request",
        "esri/tasks/query",
        "esri/geometry/Point",
        "esri/graphic",
        "esri/symbols/PictureMarkerSymbol",
        "dojo/on",
        "esri/Color",
        "dojo/_base/array",
        "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory",
        "dijit/form/Button",
        "dojo/parser", "dojo/_base/declare", "dojo/dom",
        "dijit/TitlePane", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function (
      Map,
      InfoTemplate,
      Geocoder,
      Graphic, query, esriConfig, normalizeUtils, GeometryService, BufferParameters, Draw, SimpleLineSymbol, SimpleFillSymbol, SimpleMarkerSymbol,
      Measurement,
      FeatureLayer,
      PopupTemplate,
      esriRequest,
      Query,
      Point,
      Graphic,
      PictureMarkerSymbol,
      on,
      Color,
      array,
      Grid, Selection, Memory,
      Button,
      parser, declare, dom
    ) {
      parser.parse();
      esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
      esriConfig.defaults.io.proxyUrl = "/proxy/";
      esriConfig.defaults.io.alwaysUseProxy = false;
      //Setup button click handlers
      on(dom.byId("clearGraphics"), "click", function () {
        if (map) {
          map.graphics.clear();
        }
      });
      //click handler for the draw tool buttons
      query(".tool").on("click", function (evt) {
        if (tb) {
          tb.activate(evt.target.id);
        }
      });
      var featureLayer;
      map = new Map("map", {
        basemap: "streets",
        center: [-46.807, 32.553],
        zoom: 3
      });
      map.on("load", initOperationalLayer);

      function initOperationalLayer() {
        //Layer that is in Lat, Long Spatial reference 102100
        var infoTemplate = new InfoTemplate();
        var hydrant = new FeatureLayer("http://services1.arcgis.com/ziLNoRgqnICUM0q1/arcgis/rest/services/Hydrants/FeatureServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: infoTemplate
        });
        map.on("load", initToolbar);

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

        function doBuffer(evtObj) {
          tb.deactivate();
          var geometry = evtObj.geometry,
            symbol;
          switch (geometry.type) {
          case "point":
            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":
            symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1);
            break;
          case "polygon":
            symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));
            break;
          }
          var graphic = new Graphic(geometry, symbol);
          map.graphics.add(graphic);
          //setup the buffer parameters
          var params = new BufferParameters();
          params.distances = [dom.byId("distance").value];
          params.outSpatialReference = map.spatialReference;
          params.unit = GeometryService[dom.byId("unit").value];
          //normalize the geometry
          normalizeUtils.normalizeCentralMeridian([geometry]).then(function (normalizedGeometries) {
            var normalizedGeometry = normalizedGeometries[0];
            if (normalizedGeometry.type === "polygon") {
              //if geometry is a polygon then simplify polygon.  This will make the user drawn polygon topologically correct.
              esriConfig.defaults.geometryService.simplify([normalizedGeometry], function (geometries) {
                params.geometries = geometries;
                esriConfig.defaults.geometryService.buffer(params, showBuffer);
              });
            } else {
              params.geometries = [normalizedGeometry];
              esriConfig.defaults.geometryService.buffer(params, showBuffer);
            }
          });
        }

        function showBuffer(bufferedGeometries) {
          var symbol = new SimpleFillSymbol(
            SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID,
              new Color([255, 0, 0, 0.65]), 2
            ),
            new Color([255, 0, 0, 0.35])
          );
          array.forEach(bufferedGeometries, function (geometry) {
            var graphic = new Graphic(geometry, symbol);
            map.graphics.add(graphic);
          });
        }
        //Layer that is NAD83 / UTM zone 15 N Spatial Reference 26915
        var parcel = new FeatureLayer("http://gis.hennepin.us/ArcGIS/rest/services/Maps/NATURALRESOURCES/MapServer/2", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: infoTemplate
        });
        var outline = new esri.symbol.SimpleLineSymbol()
          .setColor(dojo.colorFromHex('#fff'));
        var sym = new esri.symbol.SimpleFillSymbol()
          .setColor(new dojo.Color([212, 212, 210, 0.3]))
          .setOutline(outline);
        var renderer = new esri.renderer.SimpleRenderer(sym);
        parcel.setRenderer(renderer);
        hydrant.maxScale = 1000;
        hydrant.minScale = 10000;
        parcel.maxScale = 1000;
        parcel.minScale = 10000;
        map.addLayer(hydrant);
        map.addLayer(parcel);
      }
      //create a feature collection for the flickr photos
      var featureCollection = {
        "layerDefinition": null,
        "featureSet": {
          "features": [],
          "geometryType": "esriGeometryPoint"
        }
      };
      featureCollection.layerDefinition = {
        "geometryType": "esriGeometryPoint",
        "objectIdField": "ObjectID",
        "drawingInfo": {
          "renderer": {
            "type": "simple",
            "symbol": {
              "type": "esriPMS",
              "url": "images/circle_red.png",
              "contentType": "image/png",
              "width": 15,
              "height": 15
            }
          }
        },
        "fields": [{
          "name": "ObjectID",
          "alias": "ObjectID",
          "type": "esriFieldTypeOID"
              }, {
          "name": "description",
          "alias": "description",
          "type": "esriFieldTypeString"
              }, {
          "name": "title",
          "alias": "Title",
          "type": "esriFieldTypeString"
              }, {
          "name": "description",
          "alias": "description",
          "type": "esriFieldTypeString"
              }, {
          "name": "ID1",
          "alias": "ID1",
          "type": "esriFieldTypeInteger"
              }, {
          "name": "Date1",
          "alias": "Date1",
          "type": "esriFieldTypeString"
              }]
      };
      //define a popup template
      var popupTemplate = new esri.dijit.PopupTemplate({
        title: "{title}",
        fieldInfos: [
          {
            fieldName: "author",
            visible: true,
            label: "author"
          },
          {
            fieldName: "tags",
            visible: true,
            label: "tags"
          },
          {
            fieldName: "ID1",
            visible: true,
            label: "ID1"
          },
          {
            fieldName: "description",
            visible: true,
            label: "description"
          },
          {
            fieldName: "test",
            visible: true,
            label: "test"
          },
          {
            fieldName: "Date1",
            visible: true,
            label: "Date1"
          }
          ],
        showAttachments: true
      });
      //create a feature layer based on the feature collection
      featureLayer = new FeatureLayer(featureCollection, {
        id: 'flickrLayer',
        outFields: ["*"],
        infoTemplate: popupTemplate
      });
      //associate the features with the popup on click
      featureLayer.on("click", function (evt) {
        map.infoWindow.setFeatures([evt.graphic]);
      });
      map.on("layers-add-result", function (evt) {
        requestPhotos();
      });
      //add the feature layer that contains the flickr photos to the map
      map.addLayers([featureLayer]);

      function requestPhotos() {
        //get geotagged photos from flickr
        //tags=flower&tagmode=all
        var requestHandle = esriRequest({
          url: "http://localhost:15095/Service1.svc/getAllFlickr",
          callbackParamName: "jsoncallback"
        });
        requestHandle.then(requestSucceeded, requestFailed);
      }

      function requestSucceeded(response, io) {
        //loop through the items and add to the feature layer
        var features = [];
        array.forEach(response.GetAllFlickrResult, function (item, index) {
          var attr = {};
          attr["Date1"] = item.Date1;
          attr["tags"] = item.tags;
          attr["ID1"] = item.ID1;
          attr["description"] = item.description;
          attr["test"] = "https://maps.google.com/maps?q=" + item.latitude + "," + item.longitude + "&output=classic&dg=brw"
          var geometry = new Point(item);
          var graphic = new Graphic(geometry);
          if (index == response.GetAllFlickrResult.length - 1) {
            var symbol = new PictureMarkerSymbol({
              "type": "esriPMS",
              "url": "images/circle_green.png",
              "contentType": "image/png",
              "width": 20,
              "height": 20
            });
            graphic.setSymbol(symbol);
          }
          graphic.setAttributes(attr);
          features.push(graphic);
        });
        var items = array.map(features, function (feature) {
          return feature.attributes;
        });
        featureLayer.applyEdits(features, null, null, function () {
          var dataGrid = declare([Grid, Selection]);
          var columns = [{
            label: "", //wasn't able to inject an HTML <div> with image here
            field: "ObjectID",
            formatter: makeZoomButton
                  }, {
            label: "Date1",
            field: "Date1"
                  }];
          grid = new dataGrid({
            bufferRows: Infinity,
            columns: columns
          }, "grid");
          var memStore = new Memory({
            data: items,
            idProperty: "ObjectID"
          });
          window.grid.set("store", memStore);
          window.grid.set("sort", "ObjectID");
          grid.on(".field-ObjectID:click", function (e) {
            //retrieve the ObjectId when someone clicks on the magnifying glass
            if (e.target.alt) {
              zoomRow(e.target.alt);
            }
          });
        });
      }

      function requestFailed(error) {
        console.log('failed');
      }

      function makeZoomButton(id) {
        var zBtn = "<div data-dojo-type='dijit/form/Button'><img src='images/magnifier13.png' alt='" + id + "'";
        zBtn = zBtn + " width='18' height='18'></div>";
        return zBtn;
      }

      function zoomRow(id) {
        featureLayer.clearSelection();
        var query = new Query();
        query.objectIds = [id];
        featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {
          //zoom to the selected feature
          if (features && features.length > 0) {
            var feature = features[0]; //get the first feature
            map.centerAndZoom(feature.geometry, 13);
          }
        });
      }
      var measurement = new Measurement({
        map: map
      }, dom.byId("measurementDiv"));
      measurement.startup();
      geocoder = new Geocoder({
        autoComplete: true,
        map: map
      }, "search");
      geocoder.startup();
      geocoder.on("select", showLocation);

      function showLocation(evt) {
        map.graphics.clear();
        var point = evt.result.feature.geometry;
        var symbol = new SimpleMarkerSymbol()
          .setStyle("square")
          .setColor(new Color([255, 0, 0, 0.5]));
        var graphic = new Graphic(point, symbol);
        map.graphics.add(graphic);
        map.infoWindow.setTitle("Search Result");
        map.infoWindow.setContent(evt.result.name);
        map.infoWindow.show(evt.result.feature.geometry);
      }
    });
  </script>
</head>

<body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'">
          <div id="measurementDiv"></div>
          <span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>
        </div>
      </div>
      <div id="search"> </div>
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:275px">
      <div id="grid"></div>
    </div>
    <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
      <div class="details">Pick a tool and draw on the map. The drawn graphic will be buffered based on the specified parameters.</div>
      <button type="button" class="tool" id="line">Line</button>
      <button type="button" class="tool" id="polyline">Polyline</button>
      <button type="button" class="tool" id="freehandpolyline">Freehand Polyline</button>
      <br />
      <button type="button" class="tool" id="polygon">Polygon</button>
      <button type="button" class="tool" id="freehandpolygon">Freehand Polygon</button>
      <br />
      <hr />
      <div><b>Buffer Parameters</b></div>
      Distance:
      <input type="text" id="distance" size="5" value="25" />
      <select id="unit" style="width:100px;">
        <option value="UNIT_STATUTE_MILE">Miles</option>
        <option value="UNIT_FOOT">Feet</option>
        <option value="UNIT_KILOMETER">Kilometers</option>
        <option value="UNIT_METER">Meters</option>
        <option value="UNIT_NAUTICAL_MILE">Nautical Miles</option>
        <option value="UNIT_US_NAUTICAL_MILE">US Nautical Miles</option>
        <option value="UNIT_DEGREE">Degrees</option>
      </select>
      <br />
      <button type="button" id="clearGraphics">Clear Graphics</button>
    </div>
  </div>
</body>

</html>

Message was edited by: Robert Scheitlin, GISP

Re: Drawing Tool with Buffer not working in my project

RobertScheitlin__GISP — Sat, 11 Dec 2021 21:59:14 GMT

Brain,

You had function inside of functions (not a standard/desired workflow) and you where attaching to map "load" for your initOperationalLayer and then in there trying to attach to map "load" again to fire off initToolbar. Well the map was loaded and you got to initOperationalLayer but the map was already loaded when you attached the second map "load" inside the initOperationalLayer so your initToolbar never fired. Also you have a mixture or Legacy and AMD in your project. It will work for now (will not in JS API 4.x) but you really should clean up the old Legacy code.

Here is a snipit of your code that is Legacy:

        var outline = new esri.symbol.SimpleLineSymbol()
          .setColor(dojo.colorFromHex('#fff'));
        var sym = new esri.symbol.SimpleFillSymbol()
          .setColor(new dojo.Color([212, 212, 210, 0.3]))
          .setOutline(outline);
        var renderer = new esri.renderer.SimpleRenderer(sym);

Here is how it looks in AMD once you have added your requires:

"esri/symbols/SimpleFillSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/renderers/SimpleRenderer",

"esri/Color",

        var outline = new SimpleLineSymbol()
          .setColor(color.fromHex('#fff'));
        var sym = new SimpleFillSymbol()
          .setColor(new color([212, 212, 210, 0.3]))
          .setOutline(outline);
        var renderer = new SimpleRenderer(sym);

Here is the updated code with the AMD changes, all that whitespace squashed, beautified, and working:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the
    samples on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Flickr</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #rightPane {
      color: #000;
      width: 250px;
      padding-bottom: 15px;
    }

    .details {
      font-size: 14px;
      font-weight: 600;
      padding-bottom: 20px;
    }

    button1 {
      margin: 2px;
      cursor: pointer;
    }

    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 60px;
    }

    .esriScalebar {
      padding: 20px 20px;
    }

    #map {
      padding: 0;
    }

    .dgrid {
      border: none;
      height: 100%;
    }

    .dgrid-column-0 {
      width: 35px;
    }

    .dgrid-row-odd {
      background: #FFFDF3;
    }

    td div img:hover {
      cursor: pointer;
    }

    #titlePane {
      width: 240px;
    }

    .claro .dijitTitlePaneTitle {
      background: #fff;
      font-weight: 600;
      border: none;
      border-bottom: solid 1px #29201A;
      border-top: solid 1px #29201A;
    }

    .claro .dijitTitlePaneTitleHover {
      background: #eee;
    }

    .claro .dijitTitlePaneTitleActive {
      background: #808775;
    }

    .claro .dijitTitlePaneContentOuter {
      border-right: none;
      border-bottom: none;
      border-left: none;
    }
  </style>
  <!--<script>
    var dojoConfig = {
      parseOnLoad: true
    };
  </script>-->
  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
    var map, geocoder, grid, tb;
    require([
        "esri/map",
        "esri/InfoTemplate",
        "esri/dijit/Geocoder",
        "esri/graphic",
        "dojo/query",
        "esri/config",
        "esri/geometry/normalizeUtils",
        "esri/tasks/GeometryService",
        "esri/tasks/BufferParameters",
        "esri/toolbars/draw",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/renderers/SimpleRenderer",
        "esri/dijit/Measurement",
        "esri/layers/FeatureLayer",
        "esri/dijit/PopupTemplate",
        "esri/request",
        "esri/tasks/query",
        "esri/geometry/Point",
        "esri/graphic",
        "esri/symbols/PictureMarkerSymbol",
        "dojo/on",
        "esri/Color",
        "dojo/_base/array",
        "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory",
        "dijit/form/Button",
        "dojo/parser", "dojo/_base/declare", "dojo/dom",
        "dijit/TitlePane", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function (
      Map,
      InfoTemplate,
      Geocoder,
      Graphic, query, esriConfig, normalizeUtils, GeometryService, BufferParameters, Draw, SimpleLineSymbol, SimpleFillSymbol, SimpleMarkerSymbol,
      SimpleRenderer,
      Measurement,
      FeatureLayer,
      PopupTemplate,
      esriRequest,
      Query,
      Point,
      Graphic,
      PictureMarkerSymbol,
      on,
      Color,
      array,
      Grid, Selection, Memory,
      Button,
      parser, declare, dom
    ) {
      parser.parse();
      esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
      esriConfig.defaults.io.proxyUrl = "/proxy/";
      esriConfig.defaults.io.alwaysUseProxy = false;
      //Setup button click handlers
      on(dom.byId("clearGraphics"), "click", function () {
        if (map) {
          map.graphics.clear();
        }
      });

      var featureLayer;
      map = new Map("map", {
        basemap: "streets",
        center: [-46.807, 32.553],
        zoom: 3
      });
      map.on("load", initOperationalLayer);
      map.on("load", initToolbar);

      function initOperationalLayer() {
        //Layer that is in Lat, Long Spatial reference 102100
        var infoTemplate = new InfoTemplate();
        var hydrant = new FeatureLayer("http://services1.arcgis.com/ziLNoRgqnICUM0q1/arcgis/rest/services/Hydrants/FeatureServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: infoTemplate
        });

        //Layer that is NAD83 / UTM zone 15 N Spatial Reference 26915
        var parcel = new FeatureLayer("http://gis.hennepin.us/ArcGIS/rest/services/Maps/NATURALRESOURCES/MapServer/2", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: infoTemplate
        });
        var outline = new SimpleLineSymbol()
          .setColor(Color.fromHex('#fff'));
        var sym = new SimpleFillSymbol()
          .setColor(new Color([212, 212, 210, 0.3]))
          .setOutline(outline);
        var renderer = new SimpleRenderer(sym);
        parcel.setRenderer(renderer);
        hydrant.maxScale = 1000;
        hydrant.minScale = 10000;
        parcel.maxScale = 1000;
        parcel.minScale = 10000;
        map.addLayer(hydrant);
        map.addLayer(parcel);
      }

      function initToolbar(evtObj) {
        tb = new Draw(evtObj.map);
        tb.on("draw-end", doBuffer);
        //click handler for the draw tool buttons
        query(".tool").on("click", function (evt) {
          console.info(evt);
          if (tb) {
            tb.activate(evt.target.id);
          }
        });
      }

      function doBuffer(evtObj) {
        tb.deactivate();
        var geometry = evtObj.geometry,
          symbol;
        switch (geometry.type) {
        case "point":
          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":
          symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1);
          break;
        case "polygon":
          symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));
          break;
        }
        var graphic = new Graphic(geometry, symbol);
        map.graphics.add(graphic);
        //setup the buffer parameters
        var params = new BufferParameters();
        params.distances = [dom.byId("distance").value];
        params.outSpatialReference = map.spatialReference;
        params.unit = GeometryService[dom.byId("unit").value];
        //normalize the geometry
        normalizeUtils.normalizeCentralMeridian([geometry]).then(function (normalizedGeometries) {
          var normalizedGeometry = normalizedGeometries[0];
          if (normalizedGeometry.type === "polygon") {
            //if geometry is a polygon then simplify polygon.  This will make the user drawn polygon topologically correct.
            esriConfig.defaults.geometryService.simplify([normalizedGeometry], function (geometries) {
              params.geometries = geometries;
              esriConfig.defaults.geometryService.buffer(params, showBuffer);
            });
          } else {
            params.geometries = [normalizedGeometry];
            esriConfig.defaults.geometryService.buffer(params, showBuffer);
          }
        });
      }

      function showBuffer(bufferedGeometries) {
        var symbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([255, 0, 0, 0.65]), 2
          ),
          new Color([255, 0, 0, 0.35])
        );
        array.forEach(bufferedGeometries, function (geometry) {
          var graphic = new Graphic(geometry, symbol);
          map.graphics.add(graphic);
        });
      }

      //create a feature collection for the flickr photos
      var featureCollection = {
        "layerDefinition": null,
        "featureSet": {
          "features": [],
          "geometryType": "esriGeometryPoint"
        }
      };
      featureCollection.layerDefinition = {
        "geometryType": "esriGeometryPoint",
        "objectIdField": "ObjectID",
        "drawingInfo": {
          "renderer": {
            "type": "simple",
            "symbol": {
              "type": "esriPMS",
              "url": "images/circle_red.png",
              "contentType": "image/png",
              "width": 15,
              "height": 15
            }
          }
        },
        "fields": [{
          "name": "ObjectID",
          "alias": "ObjectID",
          "type": "esriFieldTypeOID"
              }, {
          "name": "description",
          "alias": "description",
          "type": "esriFieldTypeString"
              }, {
          "name": "title",
          "alias": "Title",
          "type": "esriFieldTypeString"
              }, {
          "name": "description",
          "alias": "description",
          "type": "esriFieldTypeString"
              }, {
          "name": "ID1",
          "alias": "ID1",
          "type": "esriFieldTypeInteger"
              }, {
          "name": "Date1",
          "alias": "Date1",
          "type": "esriFieldTypeString"
              }]
      };
      //define a popup template
      var popupTemplate = new PopupTemplate({
        title: "{title}",
        fieldInfos: [
          {
            fieldName: "author",
            visible: true,
            label: "author"
          },
          {
            fieldName: "tags",
            visible: true,
            label: "tags"
          },
          {
            fieldName: "ID1",
            visible: true,
            label: "ID1"
          },
          {
            fieldName: "description",
            visible: true,
            label: "description"
          },
          {
            fieldName: "test",
            visible: true,
            label: "test"
          },
          {
            fieldName: "Date1",
            visible: true,
            label: "Date1"
          }
          ],
        showAttachments: true
      });
      //create a feature layer based on the feature collection
      featureLayer = new FeatureLayer(featureCollection, {
        id: 'flickrLayer',
        outFields: ["*"],
        infoTemplate: popupTemplate
      });
      //associate the features with the popup on click
      featureLayer.on("click", function (evt) {
        map.infoWindow.setFeatures([evt.graphic]);
      });
      map.on("layers-add-result", function (evt) {
        requestPhotos();
      });
      //add the feature layer that contains the flickr photos to the map
      map.addLayers([featureLayer]);

      function requestPhotos() {
        //get geotagged photos from flickr
        //tags=flower&tagmode=all
        var requestHandle = esriRequest({
          url: "http://localhost:15095/Service1.svc/getAllFlickr",
          callbackParamName: "jsoncallback"
        });
        requestHandle.then(requestSucceeded, requestFailed);
      }

      function requestSucceeded(response, io) {
        //loop through the items and add to the feature layer
        var features = [];
        array.forEach(response.GetAllFlickrResult, function (item, index) {
          var attr = {};
          attr["Date1"] = item.Date1;
          attr["tags"] = item.tags;
          attr["ID1"] = item.ID1;
          attr["description"] = item.description;
          attr["test"] = "https://maps.google.com/maps?q=" + item.latitude + "," + item.longitude + "&output=classic&dg=brw"
          var geometry = new Point(item);
          var graphic = new Graphic(geometry);
          if (index == response.GetAllFlickrResult.length - 1) {
            var symbol = new PictureMarkerSymbol({
              "type": "esriPMS",
              "url": "images/circle_green.png",
              "contentType": "image/png",
              "width": 20,
              "height": 20
            });
            graphic.setSymbol(symbol);
          }
          graphic.setAttributes(attr);
          features.push(graphic);
        });
        var items = array.map(features, function (feature) {
          return feature.attributes;
        });
        featureLayer.applyEdits(features, null, null, function () {
          var dataGrid = declare([Grid, Selection]);
          var columns = [{
            label: "", //wasn't able to inject an HTML <div> with image here
            field: "ObjectID",
            formatter: makeZoomButton
                  }, {
            label: "Date1",
            field: "Date1"
                  }];
          grid = new dataGrid({
            bufferRows: Infinity,
            columns: columns
          }, "grid");
          var memStore = new Memory({
            data: items,
            idProperty: "ObjectID"
          });
          window.grid.set("store", memStore);
          window.grid.set("sort", "ObjectID");
          grid.on(".field-ObjectID:click", function (e) {
            //retrieve the ObjectId when someone clicks on the magnifying glass
            if (e.target.alt) {
              zoomRow(e.target.alt);
            }
          });
        });
      }

      function requestFailed(error) {
        console.log('failed');
      }

      function makeZoomButton(id) {
        var zBtn = "<div data-dojo-type='dijit/form/Button'><img src='images/magnifier13.png' alt='" + id + "'";
        zBtn = zBtn + " width='18' height='18'></div>";
        return zBtn;
      }

      function zoomRow(id) {
        featureLayer.clearSelection();
        var query = new Query();
        query.objectIds = [id];
        featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {
          //zoom to the selected feature
          if (features && features.length > 0) {
            var feature = features[0]; //get the first feature
            map.centerAndZoom(feature.geometry, 13);
          }
        });
      }
      var measurement = new Measurement({
        map: map
      }, dom.byId("measurementDiv"));
      measurement.startup();
      geocoder = new Geocoder({
        autoComplete: true,
        map: map
      }, "search");
      geocoder.startup();
      geocoder.on("select", showLocation);

      function showLocation(evt) {
        map.graphics.clear();
        var point = evt.result.feature.geometry;
        var symbol = new SimpleMarkerSymbol()
          .setStyle("square")
          .setColor(new Color([255, 0, 0, 0.5]));
        var graphic = new Graphic(point, symbol);
        map.graphics.add(graphic);
        map.infoWindow.setTitle("Search Result");
        map.infoWindow.setContent(evt.result.name);
        map.infoWindow.show(evt.result.feature.geometry);
      }
    });
  </script>
</head>

<body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'">
          <div id="measurementDiv"></div>
          <span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>
        </div>
      </div>
      <div id="search"> </div>
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:275px">
      <div id="grid"></div>
    </div>
    <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
      <div class="details">Pick a tool and draw on the map. The drawn graphic will be buffered based on the specified parameters.</div>
      <button type="button" class="tool" id="line">Line</button>
      <button type="button" class="tool" id="polyline">Polyline</button>
      <button type="button" class="tool" id="freehandpolyline">Freehand Polyline</button>
      <br />
      <button type="button" class="tool" id="polygon">Polygon</button>
      <button type="button" class="tool" id="freehandpolygon">Freehand Polygon</button>
      <br />
      <hr />
      <div><b>Buffer Parameters</b></div>
      Distance:
      <input type="text" id="distance" size="5" value="25" />
      <select id="unit" style="width:100px;">
        <option value="UNIT_STATUTE_MILE">Miles</option>
        <option value="UNIT_FOOT">Feet</option>
        <option value="UNIT_KILOMETER">Kilometers</option>
        <option value="UNIT_METER">Meters</option>
        <option value="UNIT_NAUTICAL_MILE">Nautical Miles</option>
        <option value="UNIT_US_NAUTICAL_MILE">US Nautical Miles</option>
        <option value="UNIT_DEGREE">Degrees</option>
      </select>
      <br />
      <button type="button" id="clearGraphics">Clear Graphics</button>
    </div>
  </div>
</body>

</html>

Re: Drawing Tool with Buffer not working in my project

BrianPaulson1 — Fri, 25 Sep 2015 19:01:27 GMT

Robert,

Thanks for the response and clear explanation. I have a lot of learning to do. When I tried your updated code, I get a blank map. Any ideas why? Thanks again

Re: Drawing Tool with Buffer not working in my project

RobertScheitlin__GISP — Fri, 25 Sep 2015 19:16:18 GMT

Brain,

I edited my replies code. Try it again it will work this time.

Don't forget to mark this thread as answered.

Re: Drawing Tool with Buffer not working in my project

BrianPaulson1 — Fri, 25 Sep 2015 19:19:30 GMT

Worked. Thank you very much.