Snapping with Sketch widget and Magnifier

Explore in the sandboxView live

This sample demonstrates how to utilize snapping with the Sketch widget in 2D. This sample also takes advantage of the Magnifier to make it easier to snap to the vertices of existing graphics. For instance, the Magnifier provides a magnified image on the view, which means a user does not have to zoom as much in order to locate a vertex on the Map.

This sample demonstrates how to enable the Magnifier, and display it wherever the cursor appears on the Map.

          
// enable the Magnifier
view.magnifier.visible = true;
view.magnifier.factor = 1.7; // magnification factor
view.magnifier.size = 150; // magnifier image size
view.magnifier.offset = { x: 75, y: 75}; // x and y offset values

// uses the mouse cursor location to position the Magnifier
view.on("pointer-move", (evt) => {
  view.magnifier.position = { x: evt.x, y: evt.y };
});

This sample demonstrates how to configure the SnappingOptions in the Sketch widget to toggle between feature snapping, self snapping, or both. Please refer to the SnappingOptions documentation for a list of known limitations, when working with snapping and the Sketch widget.

The following illustrates how to configure the SnappingOptions of the Sketch widget by enabling all snapping by default. It also shows how to pass a GraphicsLayer to the featureSources, which enables feature snapping on this layer.

           
const sketch = new Sketch({
  layer: graphicsLayer,
  view: view,
  // graphic will be selected as soon as it is created
  creationMode: "update",
  snappingOptions: {  // autocasts as SnappingOptions()
    enabled: true, // snapping will be on by default
    // feature snapping will be enabled on the GraphicsLayer
    featureSources: [{ layer: graphicsLayer }]
  }
});

Snapping can be toggled on/off with either the snapping options UI in the Sketch widget, or while drawing and holding the Ctrl key. The following demonstrates an example of how the sample utilizes the snapping functionality of the Sketch widget.

sketch-widget