Draw polygon feature when ever use click on the map

Sai_AnandPeketi1 · ‎04-14-2017

Hi everyone,

I am using this example for creating the buffer and passing the geometry into feature layer by using applyedits function.

Now, I want to use editing widget tool but not need to change or add the vertices to that draw feature. By passing the geometry to the featurelayer.applyedits function I cannot control on the geometry. Which say i can move the draw geometry into any direction. I need some help for how to achieve this.

Thanks for the help.

RobertScheitlin__GISP · ‎04-17-2017

Sai,

Here is the sample updated to use AMD style and adding mouse over editing to the buffers.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Buffer</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">

  <script src="https://js.arcgis.com/3.20/"></script>
  <script>
    var map = null,
      gsvc = null,
      clickHandler = null,
      editingEnabled = false,
      bufferGL = null;

    require([
      "esri/map",
      "esri/toolbars/edit",
      "esri/graphic",
      "esri/Color",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol",
      "dojo/_base/array",
      "dojo/_base/lang",
      "dojo/on",
      "esri/tasks/GeometryService",
      "esri/tasks/BufferParameters",
      "esri/layers/GraphicsLayer",
      "dojo/domReady!"
    ], function(
      Map, Edit, Graphic, Color,
      SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
      arrayUtils, lang, on, GeometryService, BufferParameters, GraphicsLayer
    ) {
      map = new Map("map", {
        basemap: "streets",
        center: [-96.935, 32.872],
        zoom: 9
      });

      var editToolbar = new Edit(map);
      gsvc = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
      clickHandler = on.pausable(map, "click", doBuffer);

      bufferGL = new GraphicsLayer({opacity: 0.7});
      map.addLayer(bufferGL);

      bufferGL.on("mouse-over", function(evt){
        clickHandler.pause();
        if (editingEnabled === false) {
          editingEnabled = true;
          editToolbar.activate(Edit.MOVE , evt.graphic);
        } else {
          editToolbar.deactivate();
          editingEnabled = false;
        }
      });

      bufferGL.on("mouse-out", function(evt){
        clickHandler.resume();
        editToolbar.deactivate();
        editingEnabled = false;
      });

      editingEnabled = false;

      function doBuffer(evt) {
        map.graphics.clear();
        var params = new BufferParameters();
        params.geometries = [evt.mapPoint];

        //buffer in linear units such as meters, km, miles etc.
        params.distances = [10];
        params.unit = GeometryService.UNIT_KILOMETER;
        params.outSpatialReference = map.spatialReference;

        gsvc.buffer(params, showBuffer);
      }

      function showBuffer(geometries) {
        var symbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([0, 0, 255, 0.65]), 2
          ),
          new Color([0, 0, 255, 0.35])
        );

        arrayUtils.forEach(geometries, function(geometry) {
          var graphic = new Graphic(geometry, symbol);
          bufferGL.add(graphic);
        });
      }
    });
  </script>
</head>

<body class="claro">
  <b>Click a location on the map to buffer. Click again on another location to buffer again.</b>
  <div id="map" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎04-17-2017

Sai,

Here is the sample updated to use AMD style and adding mouse over editing to the buffers.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Buffer</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">

  <script src="https://js.arcgis.com/3.20/"></script>
  <script>
    var map = null,
      gsvc = null,
      clickHandler = null,
      editingEnabled = false,
      bufferGL = null;

    require([
      "esri/map",
      "esri/toolbars/edit",
      "esri/graphic",
      "esri/Color",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol",
      "dojo/_base/array",
      "dojo/_base/lang",
      "dojo/on",
      "esri/tasks/GeometryService",
      "esri/tasks/BufferParameters",
      "esri/layers/GraphicsLayer",
      "dojo/domReady!"
    ], function(
      Map, Edit, Graphic, Color,
      SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
      arrayUtils, lang, on, GeometryService, BufferParameters, GraphicsLayer
    ) {
      map = new Map("map", {
        basemap: "streets",
        center: [-96.935, 32.872],
        zoom: 9
      });

      var editToolbar = new Edit(map);
      gsvc = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
      clickHandler = on.pausable(map, "click", doBuffer);

      bufferGL = new GraphicsLayer({opacity: 0.7});
      map.addLayer(bufferGL);

      bufferGL.on("mouse-over", function(evt){
        clickHandler.pause();
        if (editingEnabled === false) {
          editingEnabled = true;
          editToolbar.activate(Edit.MOVE , evt.graphic);
        } else {
          editToolbar.deactivate();
          editingEnabled = false;
        }
      });

      bufferGL.on("mouse-out", function(evt){
        clickHandler.resume();
        editToolbar.deactivate();
        editingEnabled = false;
      });

      editingEnabled = false;

      function doBuffer(evt) {
        map.graphics.clear();
        var params = new BufferParameters();
        params.geometries = [evt.mapPoint];

        //buffer in linear units such as meters, km, miles etc.
        params.distances = [10];
        params.unit = GeometryService.UNIT_KILOMETER;
        params.outSpatialReference = map.spatialReference;

        gsvc.buffer(params, showBuffer);
      }

      function showBuffer(geometries) {
        var symbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([0, 0, 255, 0.65]), 2
          ),
          new Color([0, 0, 255, 0.35])
        );

        arrayUtils.forEach(geometries, function(geometry) {
          var graphic = new Graphic(geometry, symbol);
          bufferGL.add(graphic);
        });
      }
    });
  </script>
</head>

<body class="claro">
  <b>Click a location on the map to buffer. Click again on another location to buffer again.</b>
  <div id="map" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Sai_AnandPeketi1 · ‎04-17-2017

Thanks Robert.

But I want to save the Graphic in to my feature layer. How can we do this?

RobertScheitlin__GISP · ‎04-17-2017

You just use featurelayer.applyedits and pass in your new graphic.

Sai_AnandPeketi1 · ‎04-19-2017

Thanks for help Robert.

How can added attribute data into feature layer while passing the graphic.

RobertScheitlin__GISP · ‎04-19-2017

A graphic object has an attributes property that you set to and object (key value pairs).

Sai_AnandPeketi1 · ‎04-19-2017

Can you give an example for above property.

Thanks for the help

RobertScheitlin__GISP · ‎04-19-2017

Sorry this is very basic stuff covered in the API docs (line 9 and 13):

Graphic | API Reference | ArcGIS API for JavaScript 3.20

require([
  "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol",
  "esri/Color", "esri/InfoTemplate", "esri/graphic", ... 
], function(Point, SimpleMarkerSymbol, Color, InfoTemplate, Graphic, ... ) {
  var pt = new Point(xloc,yloc,map.spatialReference)
  var sms = new SimpleMarkerSymbol().setStyle(
    SimpleMarkerSymbol.STYLE_SQUARE).setColor(
    new Color([255,0,0,0.5]));
  var attr = {"Xcoord":evt.mapPoint.x,"Ycoord":evt.mapPoint.y,"Plant":"Mesa Mint"};
  var infoTemplate = new InfoTemplate("Vernal Pool Locations","Latitude: ${Ycoord} <br/>
    Longitude: ${Xcoord} <br/>
    Plant Name:${Plant}");
  var graphic = new Graphic(pt,sms,attr,infoTemplate);
  ...
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Sai_AnandPeketi1 · ‎04-19-2017

Thanks Robert.

Sai_AnandPeketi1 · ‎04-20-2017

Is there any possible way to reset the "clickHandler.ID" value.