AnsweredAssumed Answered

Drawing Tool with Buffer not working in my project

Question asked by Alkaline182 on Sep 25, 2015
Latest reply on Sep 25, 2015 by Alkaline182

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

Outcomes