Community

Unable to edit polygon drawn using graphics.add()

420
1
07-15-2021 10:12 PM
VigneshSuresh
by
New Contributor
‎07-15-2021 10:12 PM

Hi, I am trying to create a map with simple drawing and editing functionality.
I was able to draw shapes and then edit the shapes drawn using the Sketch widget.

However, i am not able to select/edit shapes drawn using graphics.add()

I do not have much experience working with arcgis so any help would be appreciated! thanks in advance!

Code:

<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>ArcGIS JavaScript Tutorials: click on the map</title>
      <style>    html, body, #viewDiv {      padding: 0;      margin: 0;      height: 100%;      width: 100%;    }    #instruction {      padding: 15px;      background: white;      color: black;       border: 5px solid gold;       font-family: sans-serif;       font-size: 1.2em;    }  </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
      <script src="https://js.arcgis.com/4.20/"></script>    
      <script>
      var list = [];
      var func1 = null;
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Sketch"], function mainFunc(Map, MapView, Graphic, GraphicsLayer, Sketch) {
          var map = new Map({
              basemap: "topo-vector"
          });
          var view = new MapView({
              container: "viewDiv",
              map: map,
              center: [-118.805, 34.027], // longitude, latitude        
              zoom: 18
          });

          const graphicsLayer = new GraphicsLayer();
          map.add(graphicsLayer);

          const sketch = new Sketch({
            layer: graphicsLayer,
            view: view,
            creationMode: "update",
            defaultUpdateOptions: {
              tool: "move"
            }
          });

          view.ui.add(sketch, "top-right");

          view.ui.add("instruction", "bottom-left");
          view.ui.add("button", "bottom-right");

          function addPolygon(points){
            
            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: points
            };

            const simpleFillSymbol = {
              type: "simple-fill",
              color: [227, 139, 79, 0.8],  // Orange, opacity 80%
              outline: {
                  color: [255, 255, 255],
                  width: 1
              }
            };

            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol,
            });

            graphicsLayer.add(polygonGraphic);
          }

          function drawPoints(){
            var name = 'Polygon';
            var desc = 'Desc';
            addPolygon(list, name, desc);
          }

          var pts = [
                    [-118.818984489994, 34.0137559967283], //Longitude, latitude
                    [-118.806796597377, 34.0215816298725], //Longitude, latitude
                    [-118.791432890735, 34.0163883241613], //Longitude, latitude
                    [-118.79596686535, 34.008564864635],   //Longitude, latitude
                    [-118.808558110679, 34.0035027131376]  //Longitude, latitude
                ]

          addPolygon(pts)
          
          view.on("click", function(event) { // Get the coordinates of the click on the view          
              var lat = event.mapPoint.latitude;
              var lon = event.mapPoint.longitude;
              list = [lon, lat];
              document.getElementById("instruction").innerHTML = list;
          });

      });
      </script>
   </head>
   <body>
      <div id="viewDiv"></div>
      <div id="instruction">    Click on the map to retrieve coordinates and address  </div>
      <button id="button">Remove points</button>
   </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Reply
JoseBanuelos
by Esri Contributor
Esri Contributor
‎07-19-2021 12:28 PM

Hello @VigneshSuresh ,

Thanks for your question. You are running into a known issue with 2D Sketch. At the moment, it is not possible to utilize the Sketch widget with geometries containing a different spatial reference than the view's spatial reference. This means taking advantage of the selection tools and the graphic resizing and transforming tools that come with the Sketch widget.

The geometries in your code use wkid: 4326, but the view's spatialReference is wkid: 102100. You can test this by removing the basemap in your code. You will now be able to select and update those graphics. By adding the Esri basemap to your app, your MapView will utilize its spatialReference (which is Web Mercator). 

This is an issue in 2D that we are aware of and will be working on resolving in the future. This is not an issue in 3D, so you can also test this by switching your MapView to a SceneView instead. If you would like to use the Sketch widget in 2D with existing geometries on the Map, make sure those geometries' spatial reference match the view's spatial Reference. In this case they would need to be in Web Mercator.

Thanks,

Jose

0 Kudos