Utility Network Associations

ESM:

Use dark colors for code blocksCopy
import "@arcgis/map-components/components/arcgis-utility-network-associations";

CDN:

No specific import is needed for this component.

Since:ArcGIS Maps SDK for JavaScript 4.28

The Utility Network Associations component offers an intuitive user interface, reducing the complexity of working with utility network associations.

The Utility Network Associations component does not support proxied feature services or feature services that utilize stored credentials.

Properties

Property	Attribute	Type
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`autoRefreshAssociationsDisabled`	`auto-refresh-associations-disabled`	`boolean`
`connectivityAssociationsLineSymbol`		`SimpleLineSymbol`
`hideConnectivityAssociationsSettingsColorPicker`	`hide-connectivity-associations-settings-color-picker`	`boolean`
`hideConnectivityAssociationsSettingsStylePicker`	`hide-connectivity-associations-settings-style-picker`	`boolean`
`hideConnectivityAssociationsSettingsWidthInput`	`hide-connectivity-associations-settings-width-input`	`boolean`
`hideStructuralAttachmentAssociationsSettingsColorPicker`	`hide-structural-attachment-associations-settings-color-picker`	`boolean`
`hideStructuralAttachmentAssociationsSettingsStylePicker`	`hide-structural-attachment-associations-settings-style-picker`	`boolean`
`hideStructuralAttachmentAssociationsSettingsWidthInput`	`hide-structural-attachment-associations-settings-width-input`	`boolean`
`icon`	`icon`	`string`
`includeConnectivityAssociationsDisabled`	`include-connectivity-associations-disabled`	`boolean`
`includeStructuralAttachmentAssociationsDisabled`	`include-structural-attachment-associations-disabled`	`boolean`
`label`	`label`	`string`
`maxAllowableAssociations`	`max-allowable-associations`	`number`
`maxAllowableAssociationsSliderMax`	`max-allowable-associations-slider-max`	`number`
`maxAllowableAssociationsSliderMin`	`max-allowable-associations-slider-min`	`number`
`maxAllowableAssociationsSliderStep`	`max-allowable-associations-slider-step`	`number`
`position` deprecated	`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`
`showArrowsConnectivity`	`show-arrows-connectivity`	`boolean`
`showArrowsStructuralAttachment`	`show-arrows-structural-attachment`	`boolean`
`showAssociationsEnabled`	`show-associations-enabled`	`boolean`
`showConnectivityAssociationsSettingsArrowsToggle`	`show-connectivity-associations-settings-arrows-toggle`	`boolean`
`showConnectivityAssociationsSettingsCapSelect`	`show-connectivity-associations-settings-cap-select`	`boolean`
`showMaxAllowableAssociationsSlider`	`show-max-allowable-associations-slider`	`boolean`
`showStructuralAttachmentAssociationsSettingsArrowsToggle`	`show-structural-attachment-associations-settings-arrows-toggle`	`boolean`
`showStructuralAttachmentAssociationsSettingsCapSelect`	`show-structural-attachment-associations-settings-cap-select`	`boolean`
`structuralAttachmentAssociationsLineSymbol`		`SimpleLineSymbol`
`utilityNetwork`		`UtilityNetwork`
`view`		`MapView`
`visibleElementsConnectivityAssociationsSettingsArrowsToggle` deprecated	`visible-elements-connectivity-associations-settings-arrows-toggle`	`boolean`
`visibleElementsConnectivityAssociationsSettingsCapSelect` deprecated	`visible-elements-connectivity-associations-settings-cap-select`	`boolean`
`visibleElementsConnectivityAssociationsSettingsColorPicker` deprecated	`visible-elements-connectivity-associations-settings-color-picker`	`boolean`
`visibleElementsConnectivityAssociationsSettingsStylePicker` deprecated	`visible-elements-connectivity-associations-settings-style-picker`	`boolean`
`visibleElementsConnectivityAssociationsSettingsWidthInput` deprecated	`visible-elements-connectivity-associations-settings-width-input`	`boolean`
`visibleElementsMaxAllowableAssociationsSlider` deprecated	`visible-elements-max-allowable-associations-slider`	`boolean`
`visibleElementsStructuralAttachmentAssociationsSettingsArrowsToggle` deprecated	`visible-elements-structural-attachment-associations-settings-arrows-toggle`	`boolean`
`visibleElementsStructuralAttachmentAssociationsSettingsCapSelect` deprecated	`visible-elements-structural-attachment-associations-settings-cap-select`	`boolean`
`visibleElementsStructuralAttachmentAssociationsSettingsColorPicker` deprecated	`visible-elements-structural-attachment-associations-settings-color-picker`	`boolean`
`visibleElementsStructuralAttachmentAssociationsSettingsStylePicker` deprecated	`visible-elements-structural-attachment-associations-settings-style-picker`	`boolean`
`visibleElementsStructuralAttachmentAssociationsSettingsWidthInput` deprecated	`visible-elements-structural-attachment-associations-settings-width-input`	`boolean`

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

autoRefreshAssociationsDisabled

Property

autoRefreshAssociationsDisabled: boolean

Indicates whether to show a toggle to automatically show associations every time the map extent changes, or an action button to show associations within the current map extent on demand.

Attribute: auto-refresh-associations-disabled
Default value: false

connectivityAssociationsLineSymbol

Property

connectivityAssociationsLineSymbol: SimpleLineSymbol

A SimpleLineSymbol used for representing the polyline geometry that is being drawn for connectivity associations.

hideConnectivityAssociationsSettingsColorPicker

Property

hideConnectivityAssociationsSettingsColorPicker: boolean

If true, hides the connectivity association color picker.

Attribute: hide-connectivity-associations-settings-color-picker
Default value: false

hideConnectivityAssociationsSettingsStylePicker

Property

hideConnectivityAssociationsSettingsStylePicker: boolean

If true, hides the connectivity association style picker.

Attribute: hide-connectivity-associations-settings-style-picker
Default value: false

hideConnectivityAssociationsSettingsWidthInput

Property

hideConnectivityAssociationsSettingsWidthInput: boolean

If true, hides the connectivity association width input.

Attribute: hide-connectivity-associations-settings-width-input
Default value: false

hideStructuralAttachmentAssociationsSettingsColorPicker

Property

hideStructuralAttachmentAssociationsSettingsColorPicker: boolean

If true, hides the structural attachment associations color picker.

Attribute: hide-structural-attachment-associations-settings-color-picker
Default value: false

hideStructuralAttachmentAssociationsSettingsStylePicker

Property

hideStructuralAttachmentAssociationsSettingsStylePicker: boolean

If true, hides the structural attachment associations style picker.

Attribute: hide-structural-attachment-associations-settings-style-picker
Default value: false

hideStructuralAttachmentAssociationsSettingsWidthInput

Property

hideStructuralAttachmentAssociationsSettingsWidthInput: boolean

If true, hides the structural attachment associations width input.

Attribute: hide-structural-attachment-associations-settings-width-input
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: "view-associations"

includeConnectivityAssociationsDisabled

Property

includeConnectivityAssociationsDisabled: boolean

Indicates whether to query and display connectivity associations.

Attribute: include-connectivity-associations-disabled
Default value: false

includeStructuralAttachmentAssociationsDisabled

Property

includeStructuralAttachmentAssociationsDisabled: boolean

Indicates whether to query and display structural attachment associations.

Attribute: include-structural-attachment-associations-disabled
Default value: false

label

Property

label: string

The widget's default label.

Attribute: label

maxAllowableAssociations

Property

maxAllowableAssociations: number

The maximum number of associations that can be returned from the server.

Attribute: max-allowable-associations
Default value: 250

maxAllowableAssociationsSliderMax

Property

maxAllowableAssociationsSliderMax: number

The maximum value or upper bound of the Maximum allowable associations slider.

Attribute: max-allowable-associations-slider-max

maxAllowableAssociationsSliderMin

Property

maxAllowableAssociationsSliderMin: number

The minimum value or lower bound of the Maximum allowable associations slider.

Attribute: max-allowable-associations-slider-min

maxAllowableAssociationsSliderStep

Property

maxAllowableAssociationsSliderStep: number

Specifies the interval to move the maximum allowable associations slider with the up, or down keys.

Attribute: max-allowable-associations-slider-step

position

deprecatedProperty

position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"

Deprecatedsince 4.34, use slot instead.

Attribute: position

referenceElement

Property

referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string

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

showArrowsConnectivity

Property

showArrowsConnectivity: boolean

Indicates whether to show arrows for connectivity associations.

Attribute: show-arrows-connectivity
Default value: false

showArrowsStructuralAttachment

Property

showArrowsStructuralAttachment: boolean

Indicates whether to show arrows for structural attachment associations.

Attribute: show-arrows-structural-attachment
Default value: false

showAssociationsEnabled

Property

showAssociationsEnabled: boolean

When autoRefreshAssociations is true, indicates whether to automatically show associations every time the current map extent changes.

Attribute: show-associations-enabled
Default value: false

showConnectivityAssociationsSettingsArrowsToggle

Property

showConnectivityAssociationsSettingsArrowsToggle: boolean

If true, shows the connectivity association arrows toggle.

Attribute: show-connectivity-associations-settings-arrows-toggle
Default value: false

showConnectivityAssociationsSettingsCapSelect

Property

showConnectivityAssociationsSettingsCapSelect: boolean

If true, shows the connectivity association cap select.

Attribute: show-connectivity-associations-settings-cap-select
Default value: false

showMaxAllowableAssociationsSlider

Property

showMaxAllowableAssociationsSlider: boolean

If true, hides the max allowable associations slider.

Attribute: show-max-allowable-associations-slider
Default value: false

showStructuralAttachmentAssociationsSettingsArrowsToggle

Property

showStructuralAttachmentAssociationsSettingsArrowsToggle: boolean

If true, shows the structural attachment associations arrow toggle.

Attribute: show-structural-attachment-associations-settings-arrows-toggle
Default value: false

showStructuralAttachmentAssociationsSettingsCapSelect

Property

showStructuralAttachmentAssociationsSettingsCapSelect: boolean

If true, shows the structural attachment associations cap select.

Attribute: show-structural-attachment-associations-settings-cap-select
Default value: false

structuralAttachmentAssociationsLineSymbol

Property

structuralAttachmentAssociationsLineSymbol: SimpleLineSymbol

A SimpleLineSymbol used for representing the polyline geometry that is being drawn for structural attachment associations.

utilityNetwork

Property

utilityNetwork: UtilityNetwork

Determines the utility network to use.

view

Property

view: MapView

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 view property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Utility Network Associations component will be associated with a map or scene component rather than using the view property.

visibleElementsConnectivityAssociationsSettingsArrowsToggle

deprecatedProperty

visibleElementsConnectivityAssociationsSettingsArrowsToggle: boolean

Deprecatedsince 4.32, showConnectivityAssociationsSettingsArrowsToggle instead.

Attribute: visible-elements-connectivity-associations-settings-arrows-toggle
Default value: false

visibleElementsConnectivityAssociationsSettingsCapSelect

deprecatedProperty

visibleElementsConnectivityAssociationsSettingsCapSelect: boolean

Deprecatedsince 4.32, use showConnectivityAssociationsSettingsCapSelect instead.

Attribute: visible-elements-connectivity-associations-settings-cap-select
Default value: false

visibleElementsConnectivityAssociationsSettingsColorPicker

deprecatedProperty

visibleElementsConnectivityAssociationsSettingsColorPicker: boolean

Deprecatedsince 4.32, use hideConnectivityAssociationsSettingsColorPicker instead.

Attribute: visible-elements-connectivity-associations-settings-color-picker
Default value: true

visibleElementsConnectivityAssociationsSettingsStylePicker

deprecatedProperty

visibleElementsConnectivityAssociationsSettingsStylePicker: boolean

Deprecatedsince 4.32, use hideConnectivityAssociationsSettingsStylePicker instead.

Attribute: visible-elements-connectivity-associations-settings-style-picker
Default value: true

visibleElementsConnectivityAssociationsSettingsWidthInput

deprecatedProperty

visibleElementsConnectivityAssociationsSettingsWidthInput: boolean

Deprecatedsince 4.32, use hideConnectivityAssociationsSettingsWidthInput instead.

Attribute: visible-elements-connectivity-associations-settings-width-input
Default value: true

visibleElementsMaxAllowableAssociationsSlider

deprecatedProperty

visibleElementsMaxAllowableAssociationsSlider: boolean

Deprecatedsince 4.32, use showMaxAllowableAssociationsSlider instead.

Attribute: visible-elements-max-allowable-associations-slider
Default value: false

visibleElementsStructuralAttachmentAssociationsSettingsArrowsToggle

deprecatedProperty

visibleElementsStructuralAttachmentAssociationsSettingsArrowsToggle: boolean

Deprecatedsince 4.32, use showStructuralAttachmentAssociationsSettingsArrowsToggle instead.

Attribute: visible-elements-structural-attachment-associations-settings-arrows-toggle
Default value: false

visibleElementsStructuralAttachmentAssociationsSettingsCapSelect

deprecatedProperty

visibleElementsStructuralAttachmentAssociationsSettingsCapSelect: boolean

Deprecatedsince 4.32, use showStructuralAttachmentAssociationsSettingsCapSelect instead.

Attribute: visible-elements-structural-attachment-associations-settings-cap-select
Default value: false

visibleElementsStructuralAttachmentAssociationsSettingsColorPicker

deprecatedProperty

visibleElementsStructuralAttachmentAssociationsSettingsColorPicker: boolean

Deprecatedsince 4.32, use hideStructuralAttachmentAssociationsSettingsColorPicker instead.

Attribute: visible-elements-structural-attachment-associations-settings-color-picker
Default value: true

visibleElementsStructuralAttachmentAssociationsSettingsStylePicker

deprecatedProperty

visibleElementsStructuralAttachmentAssociationsSettingsStylePicker: boolean

Deprecatedsince 4.32, use hideStructuralAttachmentAssociationsSettingsStylePicker instead.

Attribute: visible-elements-structural-attachment-associations-settings-style-picker
Default value: true

visibleElementsStructuralAttachmentAssociationsSettingsWidthInput

deprecatedProperty

visibleElementsStructuralAttachmentAssociationsSettingsWidthInput: boolean

Deprecatedsince 4.32, use hideStructuralAttachmentAssociationsSettingsWidthInput instead.

Attribute: visible-elements-structural-attachment-associations-settings-width-input
Default value: true

Methods

Method	Signature
`componentOnReady`	`componentOnReady(): Promise<void>`
`destroy`	`destroy(): Promise<void>`

componentOnReady

Method

componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Example

Use dark colors for code blocksCopy
const arcgisUtilityNetworkAssociations = document.querySelector("arcgis-utility-network-associations");
document.body.append(arcgisUtilityNetworkAssociations);
await arcgisUtilityNetworkAssociations.componentOnReady();
console.log("arcgis-utility-network-associations is ready to go!");

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

Events

Event	Type
`arcgisReady`	`CustomEvent<void>`

arcgisReady

Event

arcgisReady: CustomEvent<void>

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