import "@arcgis/map-components/components/arcgis-snapping-controls";- Inheritance:
- ArcgisSnappingControls→
PublicLitElement
Demo
Properties
| Property | Attribute | Type |
|---|---|---|
auto-destroy-disabled | ||
hide-enabled-toggle | ||
hide-feature-enabled-toggle | ||
hide-grid-controls | ||
hide-grid-controls-elements-color-selection | ||
hide-grid-controls-elements-dynamic-scale-toggle | ||
hide-grid-controls-elements-line-interval-input | ||
hide-grid-controls-elements-numeric-inputs | ||
hide-grid-controls-elements-out-of-scale-warning | ||
hide-grid-controls-elements-placement-buttons | ||
hide-grid-controls-elements-rotate-with-map-toggle | ||
hide-layer-list | ||
hide-self-enabled-toggle | ||
icon | Icon["icon"] | |
label | ||
reference-element | ||
show-grid-controls-elements-grid-enabled-toggle | ||
show-header | ||
| ||
state readonly reflected | state | |
|
autoDestroyDisabled
- Type
- boolean
If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy() method when you are done to prevent memory leaks.
- Attribute
- auto-destroy-disabled
- Default value
- false
hideEnabledToggle
- Type
- boolean
Controls display of the "Enable snapping" toggle.
- Attribute
- hide-enabled-toggle
- Default value
- false
hideFeatureEnabledToggle
- Type
- boolean
Controls display of the "Feature to feature" toggle. This controls feature snapping.
- Attribute
- hide-feature-enabled-toggle
- Default value
- false
hideGridControls
- Type
- boolean
Controls display of the arcgis-grid-controls.
- Attribute
- hide-grid-controls
- Default value
- false
hideGridControlsElementsColorSelection
- Type
- boolean
Controls display of the buttons to change the color of the grid.
- Attribute
- hide-grid-controls-elements-color-selection
- Default value
- false
hideGridControlsElementsDynamicScaleToggle
- Type
- boolean
Controls display of the toggle that modifies dynamicScaling.
- Attribute
- hide-grid-controls-elements-dynamic-scale-toggle
- Default value
- false
hideGridControlsElementsLineIntervalInput
- Type
- boolean
Controls display of the line interval input. The input sets the interval between major grid lines.
- Attribute
- hide-grid-controls-elements-line-interval-input
- Default value
- false
hideGridControlsElementsNumericInputs
- Type
- boolean
Controls display of the numeric inputs that allow for setting grid spacing and rotation
- Attribute
- hide-grid-controls-elements-numeric-inputs
- Default value
- false
hideGridControlsElementsOutOfScaleWarning
- Type
- boolean
Controls display of the out of scale warning. This warning is displayed when the grid is not shown because it would be too small at the current scale and dynamic scaling is disabled.
- Attribute
- hide-grid-controls-elements-out-of-scale-warning
- Default value
- false
hideGridControlsElementsPlacementButtons
- Type
- boolean
Controls display of the grid placement buttons. These buttons allow the user to start interactive configuration of the grid.
- Attribute
- hide-grid-controls-elements-placement-buttons
- Default value
- false
hideGridControlsElementsRotateWithMapToggle
- Type
- boolean
Controls display of the "Rotate grid with map" toggle. This toggle controls whether the grid rotates with the map.
- Attribute
- hide-grid-controls-elements-rotate-with-map-toggle
- Default value
- false
hideLayerList
- Type
- boolean
Controls display of the "Snapping layers" dropdown. The list displays the available layers to configure snapping.
- Attribute
- hide-layer-list
- Default value
- false
hideSelfEnabledToggle
- Type
- boolean
Controls display of the “Geometry guides” toggle. This toggle controls the self-snapping configuration which handles showing right-angle and parallel line indicators while constructing or modifying geometries.
- Attribute
- hide-self-enabled-toggle
- Default value
- false
icon
- Type
- Icon["icon"]
- Since
- ArcGIS Maps SDK for JavaScript 5.0
Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).
- See also
- Attribute
- icon
- Default value
- "snap-to-point"
label
- Type
- string
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The component's default label.
- Attribute
- label
referenceElement
- Type
- ArcgisReferenceElement | string | undefined
By assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
- Attribute
- reference-element
showGridControlsElementsGridEnabledToggle
- Type
- boolean
Controls display of the "Enable grid" toggle. This toggle controls whether the grid is displayed.
- Attribute
- show-grid-controls-elements-grid-enabled-toggle
- Default value
- false
showHeader
- Type
- boolean
Controls display of the header
- Attribute
- show-header
- Default value
- false
snappingOptions
- Type
- SnappingOptions
The SnappingOptions that will be controlled by this component if the snapping toggle is enabled for display. If SnappingOptions are provided, grid display will be automatically enabled or disabled to match snapping state.
view
- Type
- MapViewOrSceneView | null | undefined
The view associated with the component.
Note: The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this
viewproperty which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-snapping-controls component will be associated with a map or scene component rather than using theviewproperty.
Methods
| Method | Signature |
|---|---|
componentOnReady inherited | componentOnReady(): Promise<this> |
destroy(): Promise<void> |
componentOnReady
- Signature
-
componentOnReady (): Promise<this>
Creates a promise that resolves once the component is fully loaded.
- Returns
- Promise<this>
Example
const arcgisSnappingControls = document.querySelector("arcgis-snapping-controls");document.body.append(arcgisSnappingControls);await arcgisSnappingControls.componentOnReady();console.log("arcgis-snapping-controls is ready to go!");Events
| Name | Type |
|---|---|
| CustomEvent<{ name: "snappingOptions" | "state"; }> | |
arcgisPropertyChange
arcgisPropertyChange: CustomEvent<{ name: "snappingOptions" | "state"; }> Emitted when the value of a property is changed. Use this to listen to changes to properties.
arcgisReady
arcgisReady: CustomEvent<void> Emitted when the component associated with a map or scene view is ready to be interacted with.