nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

タグ付けされた投稿をもっと見る

Accepted answers

JeffreyThompson2

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.

All comments

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://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 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

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.

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.