import "@arcgis/map-components/components/arcgis-sketch";
Sketch component provides a simple UI for creating and updating graphics on a MapView or a SceneView.
Demo
Properties
Property | Attribute | Type |
---|---|---|
activeTool readonly | active-tool | "circle" | "custom-selection" | "freehandPolygon" | "freehandPolyline" | "lasso-selection" | "mesh" | "move" | "multipoint" | "point" | "polygon" | "polyline" | "rectangle" | "rectangle-selection" | "reshape" | "transform" |
auto-destroy-disabled | boolean | |
| Array<"point" | "multipoint" | "polygon" | "polyline" | "mesh" | "rectangle" | "circle" | "freehandPolyline" | "freehandPolygon"> | |
createGraphic readonly |
| |
creation-mode | "continuous" | "single" | "update" | |
| SketchDefaultCreateOptions | |
default-graphics-layer-disabled | boolean | |
| SketchDefaultUpdateOptions | |
hide-create-tools-circle | boolean | |
hide-create-tools-point | boolean | |
hide-create-tools-polygon | boolean | |
hide-create-tools-polyline | boolean | |
hide-create-tools-rectangle | boolean | |
hide-delete-button | boolean | |
hide-duplicate-button | boolean | |
hide-labels-toggle | boolean | |
hide-selection-count-label | boolean | |
hide-selection-tools-lasso-selection | boolean | |
hide-selection-tools-rectangle-selection | boolean | |
hide-settings-menu | boolean | |
hide-snapping-controls | boolean | |
hide-snapping-controls-elements-enabled-toggle | boolean | |
hide-snapping-controls-elements-feature-enabled-toggle | boolean | |
hide-snapping-controls-elements-layer-list | boolean | |
hide-snapping-controls-elements-self-enabled-toggle | boolean | |
hide-tooltips-toggle | boolean | |
hide-undo-redo-menu | boolean | |
icon | string | |
label | string | |
| ||
| ||
layout | "horizontal" | "vertical" | |
| ||
| ||
| ||
position | "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing" | |
reference-element | ArcgisLinkChart | ArcgisMap | ArcgisScene | string | |
scale | "l" | "m" | "s" | |
show-snapping-controls-elements-header | boolean | |
| ||
state readonly | state | "active" | "disabled" | "ready" |
toolbar-kind | "docked" | "floating" | |
| ||
updateGraphics readonly |
|
activeTool
activeTool: "circle" | "custom-selection" | "freehandPolygon" | "freehandPolyline" | "lasso-selection" | "mesh" | "move" | "multipoint" | "point" | "polygon" | "polyline" | "rectangle" | "rectangle-selection" | "reshape" | "transform"
When creating new graphics (for example after create() has been called), this property reflects the create tool being used.
- Attribute
- active-tool
autoDestroyDisabled
autoDestroyDisabled: 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
availableCreateTools
availableCreateTools: Array<"point" | "multipoint" | "polygon" | "polyline" | "mesh" | "rectangle" | "circle" | "freehandPolyline" | "freehandPolygon">
Property controlling the visibility and order of create tool buttons.
- Default value
- ["point", "polyline", "polygon", "rectangle", "circle"]
creationMode
creationMode: "continuous" | "single" | "update"
Defines the default behavior once the create operation is completed.
- Attribute
- creation-mode
- Default value
- "continuous"
defaultCreateOptions
defaultCreateOptions: SketchDefaultCreateOptions
Default create options set for the Sketch widget.
defaultGraphicsLayerDisabled
defaultGraphicsLayerDisabled: boolean
By default, sketch will auto-create a new graphics layer if none was provided. Set this prop to true to disable this behavior.
- Attribute
- default-graphics-layer-disabled
- Default value
- false
defaultUpdateOptions
defaultUpdateOptions: SketchDefaultUpdateOptions
Default update options set for the Sketch widget.
hideCreateToolsCircle
hideCreateToolsCircle: boolean
- Attribute
- hide-create-tools-circle
- Default value
- false
hideCreateToolsPoint
hideCreateToolsPoint: boolean
- Attribute
- hide-create-tools-point
- Default value
- false
hideCreateToolsPolygon
hideCreateToolsPolygon: boolean
- Attribute
- hide-create-tools-polygon
- Default value
- false
hideCreateToolsPolyline
hideCreateToolsPolyline: boolean
- Attribute
- hide-create-tools-polyline
- Default value
- false
hideCreateToolsRectangle
hideCreateToolsRectangle: boolean
- Attribute
- hide-create-tools-rectangle
- Default value
- false
hideDuplicateButton
hideDuplicateButton: boolean
- Attribute
- hide-duplicate-button
- Default value
- false
hideSelectionCountLabel
hideSelectionCountLabel: boolean
- Attribute
- hide-selection-count-label
- Default value
- false
hideSelectionToolsLassoSelection
hideSelectionToolsLassoSelection: boolean
- Attribute
- hide-selection-tools-lasso-selection
- Default value
- false
hideSelectionToolsRectangleSelection
hideSelectionToolsRectangleSelection: boolean
- Attribute
- hide-selection-tools-rectangle-selection
- Default value
- false
hideSnappingControls
hideSnappingControls: boolean
- Attribute
- hide-snapping-controls
- Default value
- false
hideSnappingControlsElementsEnabledToggle
hideSnappingControlsElementsEnabledToggle: boolean
- Attribute
- hide-snapping-controls-elements-enabled-toggle
- Default value
- false
hideSnappingControlsElementsFeatureEnabledToggle
hideSnappingControlsElementsFeatureEnabledToggle: boolean
- Attribute
- hide-snapping-controls-elements-feature-enabled-toggle
- Default value
- false
hideSnappingControlsElementsLayerList
hideSnappingControlsElementsLayerList: boolean
- Attribute
- hide-snapping-controls-elements-layer-list
- Default value
- false
hideSnappingControlsElementsSelfEnabledToggle
hideSnappingControlsElementsSelfEnabledToggle: boolean
- Attribute
- hide-snapping-controls-elements-self-enabled-toggle
- Default value
- false
hideTooltipsToggle
hideTooltipsToggle: boolean
- Attribute
- hide-tooltips-toggle
- Default value
- false
icon
icon: string
Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component). Search Calcite Icons for possible values.
- Attribute
- icon
- Default value
- "pencil"
labelOptions
labelOptions: SketchLabelOptions
Options to configure the sketch labels shown next to each segment of the geometry being created or updated.
layout
layout: "horizontal" | "vertical"
Determines the layout/orientation of the Sketch widget.
- Attribute
- layout
- Default value
- "horizontal"
pointSymbol
pointSymbol: CIMSymbol | PictureMarkerSymbol | PointSymbol3D | SimpleMarkerSymbol | TextSymbol | WebStyleSymbol
A SimpleMarkerSymbol, PointSymbol3D, TextSymbol, CIMSymbol, or WebStyleSymbol used for representing the point geometry that is being drawn.
polygonSymbol
polygonSymbol: CIMSymbol | PolygonSymbol3D | SimpleFillSymbol
A SimpleFillSymbol, PolygonSymbol3D, or CIMSymbol used for representing the polygon geometry that is being drawn.
polylineSymbol
polylineSymbol: CIMSymbol | LineSymbol3D | SimpleLineSymbol
A SimpleLineSymbol, LineSymbol3D, or CIMSymbol used for representing the polyline geometry that is being drawn.
position
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
- Attribute
- position
- Default value
- "bottom-left"
referenceElement
referenceElement: ArcgisLinkChart | ArcgisMap | ArcgisScene | string
- Attribute
- reference-element
scale
scale: "l" | "m" | "s"
Determines the size of widget elements.
- Attribute
- scale
- Default value
- "m"
showSnappingControlsElementsHeader
showSnappingControlsElementsHeader: boolean
- Attribute
- show-snapping-controls-elements-header
- Default value
- false
state
state: "active" | "disabled" | "ready"
The Sketch widget's state.
- Attribute
- state
toolbarKind
toolbarKind: "docked" | "floating"
Controls the appearance of the sketch widget, allowing the toolbar to adapt its appearance appropriately based on context.
- Attribute
- toolbar-kind
- Default value
- "floating"
tooltipOptions
tooltipOptions: SketchTooltipOptions
Options to configure the tooltip shown next to the cursor when creating or updating graphics.
updateGraphics
updateGraphics: Collection<Graphic>
An array of graphics that are being updated by the Sketch widget.
Methods
Method | Signature |
---|---|
cancel(): Promise<void> | |
complete(): Promise<void> | |
componentOnReady(): Promise<void> | |
create(tool: "circle" | "point" | "polygon" | "polyline" | "rectangle", createOptions?: __esri.SketchViewModelCreateCreateOptions): Promise<void> | |
delete(): Promise<void> | |
destroy(): Promise<void> | |
duplicate(): Promise<void> | |
redo(): Promise<void> | |
triggerUpdate(graphic: __esri.Graphic | __esri.Graphic[], updateOptions?: __esri.SketchViewModelUpdateUpdateOptions): Promise<void> | |
undo(): Promise<void> |
componentOnReady
componentOnReady(): Promise<void>
Create a promise that resolves once component is fully loaded.
- Returns
- Promise<void>
create
create(tool: "circle" | "point" | "polygon" | "polyline" | "rectangle", createOptions?: __esri.SketchViewModelCreateCreateOptions): Promise<void>
Parameters
Parameter | Type | Optional? |
---|---|---|
tool | "circle" | "point" | "polygon" | "polyline" | "rectangle" | |
createOptions | SketchViewModelCreateCreateOptions | undefined |
- Returns
- Promise<void>
triggerUpdate
triggerUpdate(graphic: __esri.Graphic | __esri.Graphic[], updateOptions?: __esri.SketchViewModelUpdateUpdateOptions): Promise<void>
Parameters
Parameter | Type | Optional? |
---|---|---|
graphic | Array<[Graphic](https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html#aggregateGeometries)> | Graphic | |
updateOptions | SketchViewModelUpdateUpdateOptions | undefined |
- Returns
- Promise<void>
Events
Event | Type |
---|---|
SketchCreateEvent | |
SketchDeleteEvent | |
{ name: "state"; } | |
undefined | |
SketchRedoEvent | |
SketchUndoEvent | |
SketchUpdateEvent |