Edit Existing Graphics with Sketch/SketchViewModel

171
2
Jump to solution
10-20-2021 07:05 AM
kjtrottier
New Contributor II

I am trying to get the sketch widget (or sketchviewmodel) to work with graphics that were added to the map using the graphicsLayer.add(graphic) method in the esri js api 4.x.

Currently a user can create a new graphic using the sketch widget and all the necessary info (geometry, color, label text, size, etc.) is stored inside a database so it can save and reload the graphics they made.  However, the graphics created using add method do not interact with the sketch widget at all, and cannot be edited after they are saved. Both graphics (one created from sketch and the ones created with add) are on the same graphicslayer.

Is there a way to allow the sketch to edit the added graphics or a workaround to use?

0 Kudos
1 Solution

Accepted Solutions
JoseBanuelos
Esri Contributor

@kjtrottier ,

It is possible to edit existing graphics on a GraphicsLayer using the Sketch widget, if the widget is using the same GraphicsLayer. The graphics must be using the same spatial reference as the view, otherwise you will experience the issue you are seeing where you are not able to edit the existing graphics. To demonstrate this is possible, here is a test app:

https://codepen.io/banuelosj/pen/GRvjjow

Notice the graphics in the app added with GraphicsLayer.add(graphic) are using the same spatial reference as the MapView, which is Web Mercator (102100).

Thanks,

Jose

View solution in original post

2 Replies
JoseBanuelos
Esri Contributor

@kjtrottier ,

It is possible to edit existing graphics on a GraphicsLayer using the Sketch widget, if the widget is using the same GraphicsLayer. The graphics must be using the same spatial reference as the view, otherwise you will experience the issue you are seeing where you are not able to edit the existing graphics. To demonstrate this is possible, here is a test app:

https://codepen.io/banuelosj/pen/GRvjjow

Notice the graphics in the app added with GraphicsLayer.add(graphic) are using the same spatial reference as the MapView, which is Web Mercator (102100).

Thanks,

Jose

View solution in original post

kjtrottier
New Contributor II

Thanks for the answer, made me realize I was getting the spatial reference from the wrong place, and its now working properly.

Thank You.

0 Kudos