This sample controls snapping, tooltips, and units from a single place in the Scene component. Use the component’s options property to configure these options. See ViewOptions for supported components, analyses, view models, and their inherited options.

In the code below, viewElement refers to the Scene component.

Snapping and tooltips

Enable snapping to geometry guides and features using the snapping toggle.

snapping.addEventListener("calciteSwitchChange", () => {
  viewElement.options.snapping.enabled = snapping.checked;
});

Use the tooltips toggle to show tooltips while sketching, editing, or placing analyses.

tooltips.addEventListener("calciteSwitchChange", () => {
  viewElement.options.tooltips.enabled = tooltips.checked;
});

Display and input units

Use options.displayUnits for displayed measurements and options.inputUnits for numeric input. This sample switches both between meters and feet, including their corresponding area and volume units. Input units do not change stored geometry coordinates.

function updateUnits() {
  const unit = units.selectedItem.value;
  const selectedUnits = {
    length: unit,
    verticalLength: unit,
    area: unit === "feet" ? "square-feet" : "square-meters",
    volume: unit === "feet" ? "cubic-feet" : "cubic-meters",
  };
  viewElement.options.displayUnits = selectedUnits;
  viewElement.options.inputUnits = selectedUnits;
}

Setting units at the component level overrides the corresponding view units for that component only. In this sample, choosing a unit in either measurement component displays a reset icon that restores the view’s units. For programmatic overrides on a component, view model, or analysis, set the unit back to null to inherit the view unit again.

Sketch and Editor

Set Sketch.useViewOptions to true to make Sketch inherit the view options. In HTML, add the use-view-options attribute:

<arcgis-sketch use-view-options></arcgis-sketch>

The same opt-in applies to Editor, SketchViewModel, and EditorViewModel.

Related samples and resources

Sketch component

Sample Code

Exploratory Analysis component

Sample Code

Line of sight component

Sample Code