Get Draw Widget Coordinates ArcGIS Experience Builder

[MulfordnSons]

I am building an application that requires users to draw a box around an AOI that will be used for further processing. 

I would like to this to be a web based solution, ideally Experience Builder. 

I need to be able to access the coordinates (bounding box) of the rectangle that users draw via a custom widget. 

Setting up the custom widget isn't an issue - I'm just slightly lost on how to go about communicating with the draw widget and getting those coordinates. I have been searching online for a similar tutorial that could help get me started, but to no avail. 

Any guidance is appreciated.

[JeffreyThompson2]

My recommendation would be to use the Sketch Widget from the JavaScript API instead of the Draw Widget built into Experience Builder. 

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

You can import any of the API widgets into Experience Builder and using the API version, you will have more control over the options available to your users, you will know the id for the graphicLayer created by the Sketch, and can trigger an event when the user finishes their drawing.

[MulfordnSons]

Thanks for the reply.

When you say "Import any of the API widgets into ExB" - do you mean simply creating a new widget and importing the widget in the code of the custom widget?

[JeffreyThompson2]

https://github.com/Esri/arcgis-experience-builder-sdk-resources/tree/master/widgets/js-api-widget

This sample widget shows calling in a Legend Widget from the API. The process is very similar to working directly with the API.

It is possible to integrate an API widget into a larger Experience Builder custom widget. For one application, I found it much easier to call in the API version of the Search Widget as the first part of a more complex search and filter widget, than to try and trigger my custom widget from the default Experience Builder Search Widget.

[MulfordnSons]

Thanks again for your reply. 

I am just playing around with the sketch widget sample to wrap my read around its structure, and am left with a few more questions. 

After completing a sketch, I can access the graphics geometry like below:

 sketch.on("create", function(event){
          // respond to create event while the cursor is being moved on the view.
         console.log(event.graphic.geometry)
        });  

This returns the following structure: 

// [object Object] 
{
  "spatialReference": {
    "latestWkid": 3857,
    "wkid": 102100
  },
  "rings": [
    [
      [
        15537369.872130333,
        4258896.168012991
      ],
      [
        15537293.83318726,
        4258896.168012991
      ],
      [
        15537293.83318726,
        4258943.213361706
      ],
      [
        15537369.872130333,
        4258943.213361706
      ],
      [
        15537369.872130333,
        4258896.168012991
      ]
    ]
  ]
}

is "rings" the sketches geometry? And if so, how do I interpret which end is which? 

I apologize for the rudimentary questions. 

[JeffreyThompson2]

https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Polygon.html#rings

The entire event.graphic.geometry object that you console logged is the geometry. Every part of it is important for proper processing of the data. Any geoprocessing or analysis task you will want to do will need the entire geometry object. The rings are the vertex points used to draw the polygon. The first vertex created is also the first item in the array and it must be the same value as the last item in the array.

[MulfordnSons]

This makes sense.

Last stupid question, I am interested in isolating each vertex from the geometry rings. Currently when trying to log just the rings of the geometry by: 

 // listen to create event
      sketch.on("create", function(event){
         console.log(event.graphic.geometry.rings)
        });  

This returns: 

Uncaught TypeError: Cannot read properties of null (reading 'rings') 
 at https://cdpn.io/cpe/boomboom/index.html?editors=1111&key=index.html-9287c7c4-1baf-a72c-dc8f-c4431e8d8099:84

Is is possible to retrieve each vertex in this "rings" list? Normally I would just grab them by their index, but it doesn't seem that I can even access the "rings" object by itself. 

I ask this because I will be using the individual vertices to create a polygon in another software (FME) via FMEs REST API that will further process this data. 

[JeffreyThompson2 · Accepted solution]

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

The create event is actually invoked several times during polygon creation. I believe this error is being thrown at the start state before the rings array has been created. Try wrapping your console log in an if (event.state === 'complete'). You might also try a setTimeout function inside that if statement as there could be a momentary lag while the object is being written to memory.

[MulfordnSons]

This was it. I saw it being called multiple times but I thought it was just something weird with codepen. 

I appreciate you and your help. This will definitely get me started.

Thanks again.