Add snapping to widget

2047
4
10-06-2020 08:33 AM
WileyBogren
New Contributor III

Hi!

I would like to add snapping functionality to an existing custom widget, for use in a web app built with Web AppBuilder (Developer Edition).  When starting a new feature, I'd like my cursor to snap to control points or polygon vertices, but I've not found documentation or snippets for guidance how or where to add this.

Context:

I am creating a web app using the Web AppBuilder (Developer Edition), with fairly simple but specific functionality: sketch traverses using distance and bearing courses, to be compared against existing polygons in a separate layer.  The traverse courses should be possible to save/load to/from text files.  It looks like Tom Sellsted‌'s Traverse widget fits the bill perfectly.  Parcel Drafter would seem the obvious alternative, but I think the Traverse save/load features are actually more in line with our needs.

Goal

When choosing the traverse's starting point, I would like the cursor to snap to control points in a point layer or vertices in a separate polygon layer. Are there any examples out there for how to add this kind of snapping to the starting point cursor's behavior? It's also possible this should be set in the web map the app is based on; any help, guidance, tips, or pointers are appreciated!

Thank you,

Wiley

4 Replies
TomSellsted
MVP Regular Contributor

Wiley,

I am just using map click handlers in the traverse widget.  You could easily add snapping functionality by using the 3.x JSAPI editor widget and enabling snapping.  Use the SnappingManager module and make sure your control points are in a feature layer.  By holding down the control key when placing a point, you will see the crosshairs display as you get near a control point.  When you click with the crosshairs displayed, the point will be snapped to that location.

Here are some links that might be helpful:

Edit | API Reference | ArcGIS API for JavaScript 3.33 

Default editing widget | ArcGIS API for JavaScript 3.33 

Map | API Reference | ArcGIS API for JavaScript 3.33 

SnappingManager | API Reference | ArcGIS API for JavaScript 3.33 

Good luck on your project!

Regards,

Tom

0 Kudos
WileyBogren
New Contributor III

Thank you, Tom! I had found some of those references, but not all.

I'm having a hard time finding examples or guides for how to incorporate new arbitrary features to existing widgets' code; anything similar to what I'm trying to do here.  DO you have any ideas for good starting points?

0 Kudos
TomSellsted
MVP Regular Contributor

Wiley,

Here is an example I am using to add a point to the map and the edit toolbar events to move the point around on the map.

Edit Toolbar Example 

You should be able to view the source and see what I am doing with the edit toolbar.

Regards,

Tom

0 Kudos
RickVillarreal
New Contributor III

Really bugs me that there is a "Snapping Tolerance" in the "Edit" widget, but it is not respected for my users engaging the app. Nothing wants to "snap" despite the fact that it has bee configured to do so. 

0 Kudos