topic Re: Draw polygon feature when ever use click on the map in ArcGIS JavaScript Maps SDK Questions

Draw polygon feature when ever use click on the map

Sai_AnandPeketi1 — Fri, 14 Apr 2017 17:25:50 GMT

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.

Re: Draw polygon feature when ever use click on the map

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:46:48 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Draw polygon feature when ever use click on the map

Sai_AnandPeketi1 — Mon, 17 Apr 2017 16:56:30 GMT

Thanks Robert.

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

Re: Draw polygon feature when ever use click on the map

RobertScheitlin__GISP — Mon, 17 Apr 2017 17:00:00 GMT

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

Re: Draw polygon feature when ever use click on the map

Sai_AnandPeketi1 — Wed, 19 Apr 2017 09:28:17 GMT

Thanks for help Robert.

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

Re: Draw polygon feature when ever use click on the map

RobertScheitlin__GISP — Wed, 19 Apr 2017 11:38:13 GMT

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

Re: Draw polygon feature when ever use click on the map

Sai_AnandPeketi1 — Wed, 19 Apr 2017 15:43:36 GMT

Can you give an example for above property.

Thanks for the help

Re: Draw polygon feature when ever use click on the map

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:46:51 GMT

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);
  ...
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Draw polygon feature when ever use click on the map

Sai_AnandPeketi1 — Wed, 19 Apr 2017 17:49:11 GMT

Thanks Robert.

Re: Draw polygon feature when ever use click on the map

Sai_AnandPeketi1 — Thu, 20 Apr 2017 17:41:53 GMT

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

Re: Draw polygon feature when ever use click on the map

RobertScheitlin__GISP — Thu, 20 Apr 2017 17:55:11 GMT

for what reason?

Re: Draw polygon feature when ever use click on the map

Sai_AnandPeketi1 — Thu, 20 Apr 2017 18:34:18 GMT

Actually, I set a switch case for the geometry. So, Whenever need to change the geometry type. Im reset the function and calling once again at that time the click handler id is updating and result is getting twice the geometry with same click. the function dobuffer was calling with respect to the clickHandler.Id.

Re: Draw polygon feature when ever use click on the map

RobertScheitlin__GISP — Thu, 20 Apr 2017 18:39:52 GMT

Make sure you remove the click handler before you you add it again then

Re: Draw polygon feature when ever use click on the map

Sai_AnandPeketi1 — Sun, 12 Dec 2021 02:46:54 GMT

Thanks Robert.

My question was same how can i remove the click handler. I am doing like this , but no luck it was updating the id of clickhandler event.

clickHandler = null; 
clickHandler = on.pausable(map, "click", doBuffer);

I am newbie to javascript, this will help me to go ahead.

Re: Draw polygon feature when ever use click on the map

RobertScheitlin__GISP — Fri, 21 Apr 2017 11:59:17 GMT

clickHandler.remove();

Re: Draw polygon feature when ever use click on the map

Sai_AnandPeketi1 — Fri, 21 Apr 2017 13:16:26 GMT

Thanks Robert