import "@arcgis/map-components/components/arcgis-editor";The Editor component provides an out-of-the-box editing experience to help streamline editing within a web application.
Demo
Properties
| Property | Attribute | Type |
|---|---|---|
activeWorkflowreadonly | | CreateFeaturesWorkflow | UpdateFeaturesWorkflow | UpdateWorkflow |
autoDestroyDisabled | auto-destroy-disabled | boolean |
headingLevel | heading-level | number |
hideCreateFeaturesSection | hide-create-features-section | boolean |
hideEditFeaturesSection | hide-edit-features-section | boolean |
hideFlow | hide-flow | boolean |
hideLabelsToggle | hide-labels-toggle | boolean |
hideMergeButton | hide-merge-button | boolean |
hideSettingsMenu | hide-settings-menu | boolean |
hideSketch | hide-sketch | boolean |
hideSnappingControlsElementsEnabledToggle | hide-snapping-controls-elements-enabled-toggle | boolean |
hideSnappingControlsElementsFeatureEnabledToggle | hide-snapping-controls-elements-feature-enabled-toggle | boolean |
hideSnappingControlsElementsLayerList | hide-snapping-controls-elements-layer-list | boolean |
hideSnappingControlsElementsSelfEnabledToggle | hide-snapping-controls-elements-self-enabled-toggle | boolean |
hideSplitButton | hide-split-button | boolean |
hideTooltipsToggle | hide-tooltips-toggle | boolean |
hideUndoRedoButtons | hide-undo-redo-buttons | boolean |
hideZoomToButton | hide-zoom-to-button | boolean |
icon | icon | string |
label | label | string |
labelOptions | | SketchLabelOptions |
layerInfos | | Array<EditorLayerInfo> |
positiondeprecated | position | "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing" |
referenceElement | reference-element | HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string |
showSnappingControlsElementsHeader | show-snapping-controls-elements-header | boolean |
snappingOptions | | SnappingOptions |
statereadonlyreflected | state | "add-association-create-association" | "add-association-select-feature" | "add-association-select-layer" | "adding-attachment" | "awaiting-feature-creation-info" | "awaiting-feature-to-create" | "awaiting-feature-to-update" | "awaiting-update-feature-candidate" | "choosing-key-feature" | "creating-features" | "disabled" | "drawing-splitter-geometry" | "editing-attachment" | "editing-attributes" | "editing-existing-feature" | "editing-features" | "ready" | "reviewing-features" | "viewing-selection-list" |
supportingWidgetDefaults | | SupportingWidgetDefaults |
tooltipOptions | | SketchTooltipOptions |
view | | MapView | SceneView |
activeWorkflow
activeWorkflow: CreateFeaturesWorkflow | UpdateFeaturesWorkflow | UpdateWorkflowA property indicating the current active workflow.
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
headingLevel
headingLevel: numberIndicates the heading level to use for title of the widget.
- Attribute
- heading-level
- Default value
- 4
hideCreateFeaturesSection
hideCreateFeaturesSection: boolean- Attribute
- hide-create-features-section
- Default value
- false
hideEditFeaturesSection
hideEditFeaturesSection: boolean- Attribute
- hide-edit-features-section
- 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
hideUndoRedoButtons
hideUndoRedoButtons: boolean- Attribute
- hide-undo-redo-buttons
- 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).
- See also
- 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.
layerInfos
layerInfos: Array<EditorLayerInfo>An array of editing configurations for individual layers.
position
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"slot instead.- Attribute
- position
referenceElement
referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | stringBy 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
showSnappingControlsElementsHeader
showSnappingControlsElementsHeader: boolean- Attribute
- show-snapping-controls-elements-header
- Default value
- false
state
state: "add-association-create-association" | "add-association-select-feature" | "add-association-select-layer" | "adding-attachment" | "awaiting-feature-creation-info" | "awaiting-feature-to-create" | "awaiting-feature-to-update" | "awaiting-update-feature-candidate" | "choosing-key-feature" | "creating-features" | "disabled" | "drawing-splitter-geometry" | "editing-attachment" | "editing-attributes" | "editing-existing-feature" | "editing-features" | "ready" | "reviewing-features" | "viewing-selection-list"The current state of the component.
- Attribute
- state
supportingWidgetDefaults
supportingWidgetDefaults: SupportingWidgetDefaultsThis property allows customization of supporting Editor widgets and their default behavior.
tooltipOptions
tooltipOptions: SketchTooltipOptionsOptions to configure the tooltip shown next to the cursor when creating or updating graphics.
view
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 Editor component will be associated with a map or scene component rather than using theviewproperty.
Methods
| Method | Signature |
|---|---|
cancelWorkflow | cancelWorkflow(): Promise<void> |
componentOnReady | componentOnReady(): Promise<void> |
deleteFeatureFromWorkflow | deleteFeatureFromWorkflow(): Promise<void> |
destroy | destroy(): Promise<void> |
startCreateFeaturesWorkflowAtFeatureCreation | startCreateFeaturesWorkflowAtFeatureCreation(info: __esri.CreateFeaturesCreationInfo): Promise<void> |
startCreateFeaturesWorkflowAtFeatureTypeSelection | startCreateFeaturesWorkflowAtFeatureTypeSelection(): Promise<void> |
startUpdateWorkflowAtFeatureEdit | startUpdateWorkflowAtFeatureEdit(feature: __esri.Graphic): Promise<void> |
startUpdateWorkflowAtFeatureSelection | startUpdateWorkflowAtFeatureSelection(): Promise<void> |
startUpdateWorkflowAtMultipleFeatureSelection | startUpdateWorkflowAtMultipleFeatureSelection(candidates: __esri.Graphic[]): Promise<void> |
componentOnReady
componentOnReady(): Promise<void>Create a promise that resolves once component is fully loaded.
Example
const arcgisEditor = document.querySelector("arcgis-editor");
document.body.append(arcgisEditor);
await arcgisEditor.componentOnReady();
console.log("arcgis-editor is ready to go!");- Returns
- Promise<void>
startCreateFeaturesWorkflowAtFeatureCreation
startCreateFeaturesWorkflowAtFeatureCreation(info: __esri.CreateFeaturesCreationInfo): Promise<void>Parameters
| Parameter | Type | Optional? |
|---|---|---|
| info | CreateFeaturesCreationInfo |
- Returns
- Promise<void>
startCreateFeaturesWorkflowAtFeatureTypeSelection
startCreateFeaturesWorkflowAtFeatureTypeSelection(): Promise<void>- Returns
- Promise<void>
startUpdateWorkflowAtFeatureEdit
startUpdateWorkflowAtFeatureEdit(feature: __esri.Graphic): Promise<void>Parameters
| Parameter | Type | Optional? |
|---|---|---|
| feature | Graphic |
- Returns
- Promise<void>
startUpdateWorkflowAtFeatureSelection
startUpdateWorkflowAtFeatureSelection(): Promise<void>- Returns
- Promise<void>
startUpdateWorkflowAtMultipleFeatureSelection
startUpdateWorkflowAtMultipleFeatureSelection(candidates: __esri.Graphic[]): Promise<void>Parameters
| Parameter | Type | Optional? |
|---|---|---|
| candidates | Array<Graphic> |
- Returns
- Promise<void>
Events
| Event | Type |
|---|---|
arcgisPropertyChange | CustomEvent<{ name: "state" | "activeWorkflow"; }> |
arcgisReady | CustomEvent<void> |
arcgisSketchCreate | CustomEvent<EditorSketchCreateEvent> |
arcgisSketchUpdate | CustomEvent<EditorSketchUpdateEvent> |
arcgisPropertyChange
arcgisPropertyChange: CustomEvent<{ name: "state" | "activeWorkflow"; }>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.
arcgisSketchCreate
arcgisSketchCreate: CustomEvent<EditorSketchCreateEvent>Fires when a user starts drawing a feature, is actively drawing a feature, and completes drawing a feature.
arcgisSketchUpdate
arcgisSketchUpdate: CustomEvent<EditorSketchUpdateEvent>Fires when a user starts updating a feature's geometry, is actively updating a feature's geometry, and completes updating a feature's geometry.