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 |
|---|---|---|
activeToolreadonly | 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"> | |
createGraphicreadonly | | |
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 | |
| ||
statereadonly | state | "active" | "disabled" | "ready" |
toolbar-kind | "docked" | "floating" | |
| ||
updateGraphicsreadonly | |
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: booleanIf 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: SketchDefaultCreateOptionsDefault create options set for the Sketch widget.
defaultGraphicsLayerDisabled
defaultGraphicsLayerDisabled: booleanBy 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: SketchDefaultUpdateOptionsDefault 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: stringIcon 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: SketchLabelOptionsOptions 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 | WebStyleSymbolA SimpleMarkerSymbol, PointSymbol3D, TextSymbol, CIMSymbol, or WebStyleSymbol used for representing the point geometry that is being drawn.
polygonSymbol
polygonSymbol: CIMSymbol | PolygonSymbol3D | SimpleFillSymbolA SimpleFillSymbol, PolygonSymbol3D, or CIMSymbol used for representing the polygon geometry that is being drawn.
polylineSymbol
polylineSymbol: CIMSymbol | LineSymbol3D | SimpleLineSymbolA 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
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: SketchTooltipOptionsOptions 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 |
arcgisCreate
arcgisCreate: SketchCreateEventEvents triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisDelete
arcgisDelete: SketchDeleteEventEvents triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisPropertyChange
arcgisPropertyChange: { name: "state"; }Fired when the value of a property is changed. Use this to listen to changes to properties.
Events triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisReady
arcgisReady: undefinedEvents triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisRedo
arcgisRedo: SketchRedoEventEvents triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisUndo
arcgisUndo: SketchUndoEventEvents triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisUpdate
arcgisUpdate: SketchUpdateEventEvents triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.