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

rsharma · ‎02-26-2020

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

RobertScheitlin__GISP · ‎03-05-2020

Rajni,

That is because you are trying to add the line after the graphics layer is added to the webmap and not the actual graphic is added to the graphics layer.

Here is the solution for your code.

      view.when(function () {
        // Add the boundary polygon and new lot polygon graphics
//Here is where you are adding the graphic
        addGraphics();
//but you can not put the line here because the SketchViewMdoel has not been created yet
        // 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);
//now the graphic has been added to the graphics layer and the SketchviewMdoel is created
        sketchViewModel.update([newDevelopmentGraphic], {tool: "reshape"});
      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

rsharma · ‎03-05-2020

It worked thank you but their is another issue, that i want o change polygon fillcolor and outline color and make the line dashed

by adding this line after graphics add to graphics layer , it do not take my styling, but take default styling of polygon graphics

By the way is their any style for dashed line i couldn't find any here SimpleFillSymbol | ArcGIS API for JavaScript 4.14

i want my style of editable polygon like this,

validSymbol = createSymbol([255, 255, 255, 0.3], "dash", 2, [
255, 121, 25

but it only appear when i comment your recommended line

//now the graphic has been added to the graphics layer and the SketchviewMdoel is created
        sketchViewModel.update([newDevelopmentGraphic], {tool: "reshape"});

RobertScheitlin__GISP · ‎03-06-2020

Rajni,

You will need to open a new thread if you have anymore questions after this as You have made several on this one thread. Bellow is the updates needed to get the symbology you are wanting.

<!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);
        sketchViewModel.update([newDevelopmentGraphic], {tool: "reshape"});
      });

      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"
          });
        } else {
          graphic.symbol = validSymbol;
        }
      }

      // 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([255, 255, 255, 0.3], "solid", 2, [
          255,121,5]);
        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,
            style: "dash"
          }
        };
      }
    });
  </script>
</head>

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

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

rsharma · ‎03-09-2020

ok robert thanks for the guidance, i will start new threads for other question. Can you explain why you use else case here to add symbol to graphics.

          if (
            event.toolEventInfo &&
            (event.toolEventInfo.type === "move-stop" ||
              event.toolEventInfo.type === "reshape-stop")
          ) {
              sketchViewModel.complete();
          } 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 reshaping has been completed or cancelled
              sketchViewModel.update([graphic], { tool: "reshape" });
          }else {
          graphic.symbol = validSymbol;

}

When we are creating symbol and add it to graphics newDevelopmentGraphic, is it not sufficient here??

validSymbol = createSymbol([255, 255, 255, 0.3], "solid", 2, [
            255, 121,5]);
          newDevelopmentGraphic = new Graphic({
            geometry: webMercatorUtils.geographicToWebMercator(polygon),
            symbol: validSymbol,
            attributes: {
              newDevelopment: "new store"
            }
          });

SiyabongaKubeka · ‎07-19-2020

Hi Robert,

I am currently using the code above. I want to change the color of the polygon from light blue to red. How can I do that?

Kind Regards

Siyabonga Kubeka

rsharma · ‎07-19-2020

you just have t chnage the rgb here

 validSymbol = createSymbol([255, 255, 255, 0.3], "solid", 2, [
          255,121,5]);

rsharma · ‎03-03-2020

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

when using this code:

RobertScheitlin__GISP · ‎03-04-2020

Rajni,

I am not sure what you are qualifying as editable and non editable but either way if the coordinates that you are trying to add a geographic then either way they must be converted to web mercator.