This sample demonstrates how to create graphics with 3D symbols and how to update these graphics using a customized Sketch widget in a SceneView.

Sketch widget

The Sketch widget provides an out-of-the-box user interface (UI) for creating and updating graphics. To use the Sketch widget, create a new instance of it and set its view and layer properties. The layer property allows to connect the widget to a GraphicsLayer which saves all the created graphics. In this sample, the widget is rendered inside an HTML element which ID is specified through the container property.

      // Create the layer where the graphics are sketched and add it to the scene
      const sketchLayer = new GraphicsLayer({
        elevationInfo: {
          mode: "absolute-height",
        },
        title: "Sketched geometries",
      });

      scene.add(sketchLayer);

      // Create the Sketch widget and add it to the "sketchWidget" container inside the "sketchPanel" <div>
      const sketch = new Sketch({
        view,
        container: "sketchWidget",
        layer: sketchLayer,
        toolbarKind: "docked",
      });

      // Add the sketchPanel (which includes the sketchWidget <div>) to the view
      view.ui.add("sketchPanel", "top-right");

Customization

The SketchViewModel provides access to the underlying logic of the Sketch widget, enabling customization of the behavior and the default geometries symbology. To do that, use the viewModel property of the Sketch widget.

      // To customize the widget furhter, access its underlying logic through the SketchViewModel
      const sketchViewModel = sketch.viewModel;

This sample customizes the following options:

• Default symbols per geometry type
• Update tool settings
• Snapping
• Tooltip and label options

Default symbols per geometry type

One of the SketchViewModel’s most powerful capabilities is the ability to customize the default symbols for each geometry by setting the pointSymbol, polylineSymbol, and polygonSymbol properties.

      // Customize the SketchViewModel symbols for each geometry type
      sketchViewModel.pointSymbol = createSymbology("tree");
      sketchViewModel.polylineSymbol = createSymbology("border");
      sketchViewModel.polygonSymbol = createSymbology("building");

Update tool settings

With reshapeOptions, it is possible to modify the behavior of both the edge and move operations within the reshape tool for polygon and polyline geometries. In this sample, the logic to toggle the reshape options is handled via a UI component that appears whenever SketchViewModel calls the update() operation. The following code snippet demonstrates how to configure the reshapeOptions manually.

      // Define the default update behavior of the SketchViewModel
      sketchViewModel.defaultUpdateOptions = {
        tool: "reshape",
        reshapeOptions: {
          edgeOperation: "offset",
          shapeOperation: "move",
        },
      };

Snapping

It is also possible to configure snapping within the Sketch widget. This is handled via the snappingOptions property. The Sketch widget provides a UI to toggle snappingOptions.enabled.

      // Customize the SketchViewModel snapping options
      sketchViewModel.snappingOptions = {
        enabled: true,
        featureSources: [{ layer: sketchLayer }],
      };

Tooltip and label options

The tooltip and label properties provide helpful information when creating or updating features. You can enable them programmatically or toggle via the Sketch widget’s UI. Press Tab to activate the input mode while drawing a new feature or when editing a point, or selected vertex. In the tooltips’ input mode, one can set editing constraints or enter coordinates to achieve greater control over segment lengths, angles, as well as position and elevation values.

      // Enable tooltips and labels on SketchViewModel
      sketchViewModel.tooltipOptions = { enabled: true };
      sketchViewModel.labelOptions = { enabled: true };

In this sample, when starting to draw a polygon or polyline, the tooltip shows the absolute direction mode (relative to the map’s main axis, usually the north). But after the second vertex is drawn, the tooltip UI will switch to show relative direction (deflection) instead. You can set it via the valueOptions.

          // When starting to draw, always show the absolute direction mode
          if (event.state === "start") {
            sketchViewModel.valueOptions.directionMode = "absolute";
          }

          // After the second vertex is drawn, change to relative direction mode (deflection)
          if (
            event.state === "active" &&
            event.toolEventInfo.type === "vertex-add" &&
            event.toolEventInfo.vertices[0].vertexIndex === 1
          ) {
            sketchViewModel.valueOptions.directionMode = "relative";
          }