topic Re: create polygon with x,y coordinate and edit it via sketchviewmodel in ArcGIS JavaScript Maps SDK Questions

create polygon with x,y coordinate and edit it via sketchviewmodel

rsharma — Thu, 27 Feb 2020 07:32:22 GMT

I need to display and edit polygon but problem is in updatesketchview model they are using different coordinates format like this:

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:10:19 GMT

Rajni,

The issue is that you are using Lat Long coordinates but when you specify the geometries spatialReference you use the view.spatialReference which is web mercator (line 4).

        function createGeometry(vertices) {
          return new Polygon({
            rings: vertices,
            spatialReference: view.spatialReference
          });
        }‍‍‍‍‍‍

You need to specify the spatialReference as {wkid:4326}

        function createGeometry(vertices) {
          return new Polygon({
            rings: vertices,
            spatialReference: new SpatialReference({wkid:4326})
          });
        }‍‍‍‍‍‍‍‍‍‍‍‍

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

rsharma — Sat, 11 Dec 2021 10:10:22 GMT

Hi Robert,

Thanks for the reply, finally i got a reply from this community, i have already tried it, but it didn't show my polygon on my coordinates, but if i comment this line, it show uneditable polygon

// spatialReference: new SpatialReference({wkid:4326})

My task :I have to display property boundary with x,y coordinates, edit it and  then save editedable
polygon coordinates in my websites db or any other place apart from that user can also draw polygon dynamically
 Ex:hazard zone near boundary , i have to save that also
Could you pls guide me, if there is any other way that i could try.
From the below code i am able to only display my property boundary from linz db.
Now i have to make it editable and save it.

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

rsharma — Fri, 28 Feb 2020 04:12:24 GMT

I tried to solve above code with updatesketchview model, but it do not help. Please help . Please help if am going in wrong direction to solve my problem

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:10:25 GMT

Rajni,

To be able to use a new class constructor (i.e. new SpatialReference) you will have to add the module to your require array.

require(["esri/views/MapView", 
        "esri/WebMap",
         "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Sketch",
        "esri/geometry/SpatialReference"
       ], function(MapView, WebMap, Graphic, GraphicsLayer, Sketch, SpatialReference) {
...‍‍‍‍‍‍‍‍

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

rsharma — Fri, 28 Feb 2020 13:38:25 GMT

Ok Robert, i follow your steps, now my polygon is visible, but it is not editable, how can i edit it , if i click on it. Please find below updated code

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:10:28 GMT

Rajni,

To update a graphic using SketchViewModel, the graphic has to be in the same SpatialReference as the map. So in this case you use WebMercatorUtils to project the polygon to webmercator before you add it to the map.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Intro to MapView - Create a 2D map - 4.14</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.14/"></script>

  <script>
    require(["esri/views/MapView",
      "esri/WebMap",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/widgets/Sketch/SketchViewModel",
      "esri/geometry/Polygon",
      "esri/geometry/SpatialReference",
      "esri/geometry/support/webMercatorUtils"
    ], function (MapView, WebMap, Graphic, GraphicsLayer, SketchViewModel, Polygon, SpatialReference, webMercatorUtils) {

      let sketchViewModel,
        validSymbol,
        newDevelopmentGraphic;
      /************************************************************
       * Creates a new WebMap instance. A WebMap must reference
       * a PortalItem ID that represents a WebMap saved to
       * arcgis.com or an on-premise portal.
       *
       * To load a WebMap from an on-premise portal, set the portal
       * url with esriConfig.portalUrl.
       ************************************************************/
      var webmap = new WebMap({
        portalItem: {
          // autocasts as new PortalItem()
          id: "a8e76ad6641b46978f148cba03ab3e2d"
        }
      });

      /************************************************************
       * Set the WebMap instance to the map property in a MapView.
       ************************************************************/
      var view = new MapView({
        map: webmap,
        container: "viewDiv",
        center: [175.9258624, -37.55590445],
        zoom: 20
      });

      var graphicsLayer = new GraphicsLayer();
      webmap.add(graphicsLayer);

      setUpGraphicClickHandler();

      view.when(function () {
        // Add the boundary polygon and new lot polygon graphics
        addGraphics();

        // Create a new instance of sketchViewModel
        sketchViewModel = new SketchViewModel({
          view: view,
          layer: graphicsLayer,
          updateOnGraphicClick: false,
          defaultUpdateOptions: {
            // set the default options for the update operations
            toggleToolOnClick: false // only reshape operation will be enabled
          }
        });

        // Listen to sketchViewModel's update event to do
        // graphic reshape or move validation
        sketchViewModel.on(["update", "undo", "redo"], onGraphicUpdate);
      });

      function onGraphicUpdate(event) {
        // get the graphic as it is being updated
        const graphic = event.graphics[0];

        // check if the update event's the toolEventInfo.type is move-stop or reshape-stop
        // then it means user finished moving or reshaping the graphic, call complete method.
        // this will change update event state to complete and we will check the validity of the graphic location.
        if (
          event.toolEventInfo &&
          (event.toolEventInfo.type === "move-stop" ||
            event.toolEventInfo.type === "reshape-stop")
        ) {
          sketchViewModel.complete();
        } else if (event.state === "cancel" || event.state === "complete") {
          // graphic moving or reshaping has been completed or cancelled
          // if the graphic is in an illegal spot, call sketchviewmodel's update method again
          // giving user a chance to correct the location of the graphic
          sketchViewModel.update([graphic], {
            tool: "reshape"
          });
        }
      }

      // This function is called when a user clicks on the view.
      function setUpGraphicClickHandler() {
        view.on("click", function (event) {
          // check if the sketch's state active if it is then that means
          // the graphic is already being updated, no action required.
          if (sketchViewModel.state === "active") {
            return;
          }
          view.hitTest(event).then(function (response) {
            var results = response.results;
            // Check if the new development graphic was clicked and pass
            // the graphic to sketchViewModel.update() with reshape tool.
            //console.log(results);
            results.forEach(function (result) {
              console.log(result.mapPoint);
              if (
                result.graphic.layer === sketchViewModel.layer &&
                result.graphic.attributes &&
                result.graphic.attributes.newDevelopment
              ) {
                sketchViewModel.update([result.graphic], {
                  tool: "reshape"
                });
              }
            });
          });
        });
      }

      function addGraphics() {
        const vertices = [
          [175.9258624, -37.55590445],
          [175.9258630667, -37.55587745],
          [175.9258671333, -37.5557153],
          [175.92626316670004, -37.5557216],
          [175.92625955, -37.5558657],
          [175.9262584333, -37.5559107333],
          [175.9258624, -37.55590445]
        ];

        const polygon = createGeometry(vertices);
        validSymbol = createSymbol([0, 170, 255, 0.8], "solid", 2, [
          255,
          255,
          255
        ]);
        newDevelopmentGraphic = new Graphic({
          geometry: webMercatorUtils.geographicToWebMercator(polygon),
          symbol: validSymbol,
          attributes: {
            newDevelopment: "new store"
          }
        });
        graphicsLayer.add(newDevelopmentGraphic);
      }

      function createGeometry(vertices) {
        return new Polygon({
          rings: vertices,
          spatialReference: new SpatialReference({
            wkid: 4326
          })
        });
      }

      function createSymbol(color, style, width, outlineColor) {
        return {
          type: "simple-fill",
          style: style,
          color: color,
          outline: {
            color: outlineColor,
            width: width
          }
        };
      }
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

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

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

rsharma — Mon, 02 Mar 2020 04:41:01 GMT

Thanks Robert for being so patient and helpful to me, you are a life saver. As i was stuck in the task from the last 1 week, Besides this can you please tell me about any event or function like on mouse click up to get coordinates of polygon ring vertices , when we edit it (to save it in my db), So that next time when i login to my app it gave me same editable polygon.

Any example will be helpful.

Thanks in advance.

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

RobertScheitlin__GISP — Mon, 02 Mar 2020 13:25:18 GMT

Rajni,

Think carefully of you exact workflow (that would not interfere with standard editing of the polygon). I am not sure how a click event would work for what you want.

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

rsharma — Mon, 02 Mar 2020 13:35:58 GMT

Robert , i just want updated vertices when the user reshape the polygon which i draw it for him through sketchviewmodel. is there any function to get updated vertices when polygon reshapes

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

RobertScheitlin__GISP — Mon, 02 Mar 2020 13:39:34 GMT

Rajni,

Sure just look at the documentation. The update event has a state complete That you would listen for.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch.html#events-summary

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

rsharma — Mon, 02 Mar 2020 13:44:56 GMT

Robert , i already tried to console but didn't get anything it gives map point and graphics here

results. I want updated vertices of ring of polygon

view.hitTest(event).then(function(response) {
              var results = response.results;
              // Check if the new development graphic was clicked and pass
              // the graphic to sketchViewModel.update() with reshape tool.
              //console.log(results);
              results.forEach(function(result) {
                console.log(result.mapPoint);
                if (
                  result.graphic.layer === sketchViewModel.layer &&
                  result.graphic.attributes &&
                  result.graphic.attributes.newDevelopment
                ) {
                  sketchViewModel.update([result.graphic], { tool: "reshape" });
                }
              });
            });

Are you talking about UpdateToolEventInfo, is their any example of it how to get coordinates, bcz it have many functions under it

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:10:32 GMT

Rajni,

OK you seem to be misunderstanding. You need to watch the sketchViewModel update event.

sketchViewModel.watch("update", function(event){
  If(event.state === "complete"){
    //do something here
  }
});‍‍‍‍‍

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

rsharma — Mon, 02 Mar 2020 14:06:20 GMT

I still didn't get any function in update event and complete state to get updated vertices

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:10:34 GMT

Rajni,

OK, sorry I looked at your code again and you are already listening for sketchviewmodel update in the onGraphicUpdate function.

      function onGraphicUpdate(event) {
        // get the graphic as it is being updated
        const graphic = event.graphics[0];

        // check if the update event's the toolEventInfo.type is move-stop or reshape-stop
        // then it means user finished moving or reshaping the graphic, call complete method.
        // this will change update event state to complete and we will check the validity of the graphic location.
        if (
          event.toolEventInfo &&
          (event.toolEventInfo.type === "move-stop" ||
            event.toolEventInfo.type === "reshape-stop")
        ) {
          sketchViewModel.complete();
        } else if (event.state === "cancel" || event.state === "complete") {
          // graphic moving or reshaping has been completed or cancelled
          // if the graphic is in an illegal spot, call sketchviewmodel's update method again
          // giving user a chance to correct the location of the graphic
          sketchViewModel.update([graphic], {
            tool: "reshape"
          });
        }
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

So inside the else if on line 14 above this is where you are getting the sketch view models update > complete. So if you want the new graphic after it has been updated than inside that else if is where you get it.

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

rsharma — Tue, 03 Mar 2020 06:34:41 GMT

Hi Robert, as you suggested I listen to sketchviewmodel update event as below

          } else if (event.state === "cancel" || event.state === "complete") {
            //check if the graphics are done being reshaped, printout updated graphic's geometry and reshape stage.

            // graphic moving or reshaping has been completed or cancelled
            // if the graphic is in an illegal spot, call sketchviewmodel's update method again
            // giving user a chance to correct the location of the graphic
              sketchViewModel.update([graphic], { tool: "reshape" });
          }
              const eventInfo = event.toolEventInfo;
                  if (eventInfo && eventInfo.type.includes("reshape")) {
                    console.log(eventInfo.type, event.graphics[0].geometry);
                  }
        }

and get updated ring vertices in console->

reshape-stop > accessor > post-meta > store > values > rings

Another query is i have to click to polygon to reshape it, i just want the polygon to appear editable when my page loads. So is their any event i can use to show it editable when the webpage appears

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

RobertScheitlin__GISP — Tue, 03 Mar 2020 15:17:58 GMT

Rajni,

Just add this line when you want to in your code:

sketchViewModel.update([graphic], { tool: "reshape" });

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

rsharma — Wed, 04 Mar 2020 03:41:27 GMT

Robert, i have already added these lines, you can see in my code. i just want the polygon to appear editable when my page loads. Not when i click on it

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

rsharma — Wed, 04 Mar 2020 04:14:09 GMT

One thing more robert i have get an error in console when i click on noneditable polygon

when using this code:

Re: create polygon with x,y coordinate and edit it via sketchviewmodel

RobertScheitlin__GISP — Wed, 04 Mar 2020 13:45:15 GMT

Rajni,

Robert, i have already added these lines, you can see in my code. i just want the polygon to appear editable when my page loads. Not when i click on it

I am not talking about the fact that this line already exists in the code. I am saying that once you add your polygon on app startup you need to call that line after the polygon graphic is added to the map.