Snapping Manager in ArcGIS API for JavaScript 4.x

[HenryKo2]

Hi, in ArcGIS API for JavaScript version 3, there is this Snapping Manager widget. We use it extensively to snap to roads and intersections.

After a quick googling, I can't find a similar widget or component in ArcGIS API for JavaScript version 4.x. Does anyone know about how to do snapping in version 4.x?

What we need to do is, in the JS web app, we want to snap graphics to roads and intersections (we already have these as map/feature services).

PS. there's the Sketch widget, but at this stage we probably won't use it due to our requirements.

[johnbrosowsky · Accepted solution]

In my experience its a bit of a rabbit hole to program your own snapping manager from scratch, but good news is it looks like more snapping capability is on its way:

https://www.esri.com/arcgis-blog/products/js-api-arcgis/announcements/whats-new-in-the-arcgis-api-fo...

Enable self snapping through the new SketchViewModel.snappingOptions property and toggle it during a draw operation. This is the first step towards enabling full feature snapping in both 2D and 3D editing workflows. This support will be expanded incrementally over subsequent releases.

[HenryKo2]

With the 4.19 release in April 2021, you can now enable snapping in the Sketch widget.

[BoualiKamel]

yes all drawing networks need this feature, i think that the arcgis js api team really took a long time to develop this feature for the 4.X version.

[HenryKo2]

Update: my understanding of the requirement has changed since the original post. We are simulating "snapping" with: clicking at a map location and find the closest point on road or an intersection with a given radius/buffer, essentially finding closest/nearest. We then display the closest point as a graphic on the map to indicate "snapping".

Our front-end developer is using the ArcGIS JS 4.x functions geometryEngine.nearestCoordinate() / geometryEngine.nearestVertex() for this requirement.