RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-sketch/ below:

Sketch | ArcGIS Maps SDK for JavaScript 4.33

Use dark colors for code blocks Copy

1
import "@arcgis/map-components/components/arcgis-sketch";

No specific import is needed for this component.

The Sketch component provides a simple UI for creating and updating graphics on a MapView or a SceneView.

Demo Properties activeTool

When creating new graphics (for example after create() has been called), this property reflects the create tool being used.

Attribute: active-tool

autoDestroyDisabled

Property

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

Property

Property controlling the visibility and order of create tool buttons.

Default value: ["point", "polyline", "polygon", "rectangle", "circle"]

createGraphic

readonlyProperty

The graphic that is being created.

creationMode

Property

creationMode: "continuous" | "single" | "update"

Defines the default behavior once the create operation is completed.

Attribute: creation-mode
Default value: "continuous"

defaultCreateOptions

Property

defaultCreateOptions: SketchDefaultCreateOptions

Default create options set for the Sketch widget.

defaultGraphicsLayerDisabled

Property

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

Property

defaultUpdateOptions: SketchDefaultUpdateOptions

Default update options set for the Sketch widget.

hideCreateToolsCircle

Property

hideCreateToolsCircle: boolean

Attribute: hide-create-tools-circle
Default value: false

hideCreateToolsPoint

Property

hideCreateToolsPoint: boolean

Attribute: hide-create-tools-point
Default value: false

hideCreateToolsPolygon

Property

hideCreateToolsPolygon: boolean

Attribute: hide-create-tools-polygon
Default value: false

hideCreateToolsPolyline

Property

hideCreateToolsPolyline: boolean

Attribute: hide-create-tools-polyline
Default value: false

hideCreateToolsRectangle

Property

hideCreateToolsRectangle: boolean

Attribute: hide-create-tools-rectangle
Default value: false

hideDeleteButton

Property

hideDeleteButton: boolean

Attribute: hide-delete-button
Default value: false

hideDuplicateButton

Property

hideDuplicateButton: boolean

Attribute: hide-duplicate-button
Default value: false

hideLabelsToggle

Property

hideLabelsToggle: boolean

Attribute: hide-labels-toggle
Default value: false

hideSelectionCountLabel

Property

hideSelectionCountLabel: boolean

Attribute: hide-selection-count-label
Default value: false

hideSelectionToolsLassoSelection

Property

hideSelectionToolsLassoSelection: boolean

Attribute: hide-selection-tools-lasso-selection
Default value: false

hideSelectionToolsRectangleSelection

Property

hideSelectionToolsRectangleSelection: boolean

Attribute: hide-selection-tools-rectangle-selection
Default value: false

hideSettingsMenu

Property

hideSettingsMenu: boolean

Attribute: hide-settings-menu
Default value: false

hideSnappingControls

Property

hideSnappingControls: boolean

Attribute: hide-snapping-controls
Default value: false

hideSnappingControlsElementsEnabledToggle

Property

hideSnappingControlsElementsEnabledToggle: boolean

Attribute: hide-snapping-controls-elements-enabled-toggle
Default value: false

hideSnappingControlsElementsFeatureEnabledToggle

Property

hideSnappingControlsElementsFeatureEnabledToggle: boolean

Attribute: hide-snapping-controls-elements-feature-enabled-toggle
Default value: false

hideSnappingControlsElementsLayerList

Property

hideSnappingControlsElementsLayerList: boolean

Attribute: hide-snapping-controls-elements-layer-list
Default value: false

hideSnappingControlsElementsSelfEnabledToggle

Property

hideSnappingControlsElementsSelfEnabledToggle: boolean

Attribute: hide-snapping-controls-elements-self-enabled-toggle
Default value: false

hideTooltipsToggle

Property

hideTooltipsToggle: boolean

Attribute: hide-tooltips-toggle
Default value: false

hideUndoRedoMenu

Property

hideUndoRedoMenu: boolean

Attribute: hide-undo-redo-menu
Default value: false

icon

Property

icon: string

Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).

See also

Calcite Icons

Attribute: icon
Default value: "pencil"

label

Property

label: string

The Sketch widget's default label.

Attribute: label

labelOptions

Property

Options to configure the sketch labels shown next to each segment of the geometry being created or updated.

layer

Property

The GraphicsLayer associated with the Sketch widget.

layout

Property

layout: "horizontal" | "vertical"

Determines the layout/orientation of the Sketch widget.

Attribute: layout
Default value: "horizontal"

pointSymbol

Property

A SimpleMarkerSymbol, PointSymbol3D, TextSymbol, CIMSymbol, or WebStyleSymbol used for representing the point geometry that is being drawn.

polygonSymbol

Property

A SimpleFillSymbol, PolygonSymbol3D, or CIMSymbol used for representing the polygon geometry that is being drawn.

polylineSymbol

Property

A SimpleLineSymbol, LineSymbol3D, or CIMSymbol used for representing the polyline geometry that is being drawn.

position

Property

Attribute: position
Default value: "bottom-left"

referenceElement

Property

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.

See also

Associate components with a Map or Scene component

Attribute: reference-element

scale

Property

scale: "l" | "m" | "s"

Determines the size of widget elements.

Attribute: scale
Default value: "m"

showSnappingControlsElementsHeader

Property

showSnappingControlsElementsHeader: boolean

Attribute: show-snapping-controls-elements-header
Default value: false

snappingOptions

Property

The SnappingOptions for sketching.

state

state: "active" | "disabled" | "ready"

The current state of the component.

Attribute: state

toolbarKind

Property

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

Property

Options to configure the tooltip shown next to the cursor when creating or updating graphics.

updateGraphics

readonlyProperty

An array of graphics that are being updated by the Sketch widget.

Slots

No slots to display.

Events arcgisCreate

Event

arcgisCreate: SketchCreateEvent bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisDelete

Event

arcgisDelete: SketchDeleteEvent bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "state"; }>

Emitted when the value of a property is changed. Use this to listen to changes to properties.

bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisReady

Event

arcgisReady: CustomEvent<void>

Emitted when the component associated with a map or scene view is is ready to be interacted with.

bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisRedo

Event

arcgisRedo: SketchRedoEvent bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisUndo

Event

arcgisUndo: SketchUndoEvent bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisUpdate

Event

arcgisUpdate: SketchUpdateEvent bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Methods Method Signature cancel

cancel(): Promise<void>

complete

complete(): Promise<void>

componentOnReady

componentOnReady(): Promise<void>

create

create(tool: "circle" | "point" | "polygon" | "polyline" | "rectangle", createOptions?: __esri.SketchViewModelCreateCreateOptions): Promise<void>

delete

delete(): Promise<void>

destroy

destroy(): Promise<void>

duplicate

duplicate(): Promise<void>

redo

redo(): Promise<void>

triggerUpdate

triggerUpdate(graphic: __esri.Graphic | __esri.Graphic[], updateOptions?: __esri.SketchViewModelUpdateUpdateOptions): Promise<void>

undo

undo(): Promise<void>

cancel

Method

cancel(): Promise<void>

Returns: Promise<void>

complete

Method

complete(): Promise<void>

Returns: Promise<void>

componentOnReady

Method

componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Example

Use dark colors for code blocks Copy

1
2
3
4
const arcgisSketch = document.querySelector("arcgis-sketch");
document.body.append(arcgisSketch);
await arcgisSketch.componentOnReady();
console.log("arcgis-sketch is ready to go!");

Returns: Promise<void>

create

Method

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>

delete

Method

delete(): Promise<void>

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

duplicate

Method

duplicate(): Promise<void>

Returns: Promise<void>

redo

Method

redo(): Promise<void>

Returns: Promise<void>

triggerUpdate

Method

triggerUpdate(graphic: __esri.Graphic | __esri.Graphic[], updateOptions?: __esri.SketchViewModelUpdateUpdateOptions): Promise<void>

Parameters Parameter Type Optional?

graphic

Array<[Graphic](https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-Graphic.html)> | Graphic

updateOptions

SketchViewModelUpdateUpdateOptions | undefined

Returns: Promise<void>

undo

Method

undo(): Promise<void>

Returns: Promise<void>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4