import "@arcgis/map-components/components/arcgis-utility-network-associations";
The UtilityNetworkAssociations component offers an intuitive user interface, reducing the complexity of working with utility network associations.
The UtilityNetworkAssociations Component does not support proxied feature services or feature services that utilize stored credentials.
Note: Sign in to access the data in this sample, U/P: viewer01
/I68VGU^nMurF
Demo
Properties
Property | Attribute | Type |
---|---|---|
auto-destroy-disabled | boolean | |
auto-refresh-associations-disabled | boolean | |
| ||
hide-connectivity-associations-settings-color-picker | boolean | |
hide-connectivity-associations-settings-style-picker | boolean | |
hide-connectivity-associations-settings-width-input | boolean | |
hide-structural-attachment-associations-settings-color-picker | boolean | |
hide-structural-attachment-associations-settings-style-picker | boolean | |
hide-structural-attachment-associations-settings-width-input | boolean | |
icon | string | |
include-connectivity-associations-disabled | boolean | |
include-structural-attachment-associations-disabled | boolean | |
label | string | |
max-allowable-associations | number | |
max-allowable-associations-slider-max | number | |
max-allowable-associations-slider-min | number | |
max-allowable-associations-slider-step | number | |
position | "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing" | |
reference-element | ArcgisLinkChart | ArcgisMap | ArcgisScene | string | |
show-arrows-connectivity | boolean | |
show-arrows-structural-attachment | boolean | |
show-associations-enabled | boolean | |
show-connectivity-associations-settings-arrows-toggle | boolean | |
show-connectivity-associations-settings-cap-select | boolean | |
show-max-allowable-associations-slider | boolean | |
show-structural-attachment-associations-settings-arrows-toggle | boolean | |
show-structural-attachment-associations-settings-cap-select | boolean | |
| ||
| ||
visible-elements-connectivity-associations-settings-arrows-toggle | boolean | |
visible-elements-connectivity-associations-settings-cap-select | boolean | |
visible-elements-connectivity-associations-settings-color-picker | boolean | |
visible-elements-connectivity-associations-settings-style-picker | boolean | |
visible-elements-connectivity-associations-settings-width-input | boolean | |
visible-elements-max-allowable-associations-slider | boolean | |
visible-elements-structural-attachment-associations-settings-arrows-toggle | boolean | |
visible-elements-structural-attachment-associations-settings-cap-select | boolean | |
visible-elements-structural-attachment-associations-settings-color-picker | boolean | |
visible-elements-structural-attachment-associations-settings-style-picker | boolean | |
visible-elements-structural-attachment-associations-settings-width-input | boolean |
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
autoRefreshAssociationsDisabled
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
connectivityAssociationsLineSymbol: SimpleLineSymbol
A SimpleLineSymbol used for representing the polyline geometry that is being drawn for connectivity associations.
hideConnectivityAssociationsSettingsColorPicker
hideConnectivityAssociationsSettingsColorPicker: boolean
- Attribute
- hide-connectivity-associations-settings-color-picker
- Default value
- false
hideConnectivityAssociationsSettingsStylePicker
hideConnectivityAssociationsSettingsStylePicker: boolean
- Attribute
- hide-connectivity-associations-settings-style-picker
- Default value
- false
hideConnectivityAssociationsSettingsWidthInput
hideConnectivityAssociationsSettingsWidthInput: boolean
- Attribute
- hide-connectivity-associations-settings-width-input
- Default value
- false
hideStructuralAttachmentAssociationsSettingsColorPicker
hideStructuralAttachmentAssociationsSettingsColorPicker: boolean
- Attribute
- hide-structural-attachment-associations-settings-color-picker
- Default value
- false
hideStructuralAttachmentAssociationsSettingsStylePicker
hideStructuralAttachmentAssociationsSettingsStylePicker: boolean
- Attribute
- hide-structural-attachment-associations-settings-style-picker
- Default value
- false
hideStructuralAttachmentAssociationsSettingsWidthInput
hideStructuralAttachmentAssociationsSettingsWidthInput: boolean
- Attribute
- hide-structural-attachment-associations-settings-width-input
- 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
- "view-associations"
includeConnectivityAssociationsDisabled
includeConnectivityAssociationsDisabled: boolean
Indicates whether to query and display connectivity associations.
- Attribute
- include-connectivity-associations-disabled
- Default value
- false
includeStructuralAttachmentAssociationsDisabled
includeStructuralAttachmentAssociationsDisabled: boolean
Indicates whether to query and display structural attachment associations.
- Attribute
- include-structural-attachment-associations-disabled
- Default value
- false
maxAllowableAssociations
maxAllowableAssociations: number
The maximum number of associations that can be returned from the server.
- Attribute
- max-allowable-associations
- Default value
- 250
maxAllowableAssociationsSliderMax
maxAllowableAssociationsSliderMax: number
The maximum value or upper bound of the Maximum allowable associations slider.
- Attribute
- max-allowable-associations-slider-max
maxAllowableAssociationsSliderMin
maxAllowableAssociationsSliderMin: number
The minimum value or lower bound of the Maximum allowable associations slider.
- Attribute
- max-allowable-associations-slider-min
maxAllowableAssociationsSliderStep
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
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
showArrowsConnectivity
showArrowsConnectivity: boolean
Indicates whether to show arrows for connectivity associations.
- Attribute
- show-arrows-connectivity
- Default value
- false
showArrowsStructuralAttachment
showArrowsStructuralAttachment: boolean
Indicates whether to show arrows for structural attachment associations.
- Attribute
- show-arrows-structural-attachment
- Default value
- false
showAssociationsEnabled
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
showConnectivityAssociationsSettingsArrowsToggle: boolean
- Attribute
- show-connectivity-associations-settings-arrows-toggle
- Default value
- false
showConnectivityAssociationsSettingsCapSelect
showConnectivityAssociationsSettingsCapSelect: boolean
- Attribute
- show-connectivity-associations-settings-cap-select
- Default value
- false
showMaxAllowableAssociationsSlider
showMaxAllowableAssociationsSlider: boolean
- Attribute
- show-max-allowable-associations-slider
- Default value
- false
showStructuralAttachmentAssociationsSettingsArrowsToggle
showStructuralAttachmentAssociationsSettingsArrowsToggle: boolean
- Attribute
- show-structural-attachment-associations-settings-arrows-toggle
- Default value
- false
showStructuralAttachmentAssociationsSettingsCapSelect
showStructuralAttachmentAssociationsSettingsCapSelect: boolean
- Attribute
- show-structural-attachment-associations-settings-cap-select
- Default value
- false
structuralAttachmentAssociationsLineSymbol
structuralAttachmentAssociationsLineSymbol: SimpleLineSymbol
A SimpleLineSymbol used for representing the polyline geometry that is being drawn for structural attachment associations.
visibleElementsConnectivityAssociationsSettingsArrowsToggle
visibleElementsConnectivityAssociationsSettingsArrowsToggle: boolean
Use hideConnectivityAssociationsSettingsArrowsToggle instead
- Attribute
- visible-elements-connectivity-associations-settings-arrows-toggle
- Default value
- false
visibleElementsConnectivityAssociationsSettingsCapSelect
visibleElementsConnectivityAssociationsSettingsCapSelect: boolean
Use hideConnectivityAssociationsSettingsCapSelect instead
- Attribute
- visible-elements-connectivity-associations-settings-cap-select
- Default value
- false
visibleElementsConnectivityAssociationsSettingsColorPicker
visibleElementsConnectivityAssociationsSettingsColorPicker: boolean
Use hideConnectivityAssociationsSettingsColorPicker instead
- Attribute
- visible-elements-connectivity-associations-settings-color-picker
- Default value
- true
visibleElementsConnectivityAssociationsSettingsStylePicker
visibleElementsConnectivityAssociationsSettingsStylePicker: boolean
Use hideConnectivityAssociationsSettingsStylePicker instead
- Attribute
- visible-elements-connectivity-associations-settings-style-picker
- Default value
- true
visibleElementsConnectivityAssociationsSettingsWidthInput
visibleElementsConnectivityAssociationsSettingsWidthInput: boolean
Use hideConnectivityAssociationsSettingsWidthInput instead
- Attribute
- visible-elements-connectivity-associations-settings-width-input
- Default value
- true
visibleElementsMaxAllowableAssociationsSlider
visibleElementsMaxAllowableAssociationsSlider: boolean
Use hideMaxAllowableAssociationsSlider instead
- Attribute
- visible-elements-max-allowable-associations-slider
- Default value
- false
visibleElementsStructuralAttachmentAssociationsSettingsArrowsToggle
visibleElementsStructuralAttachmentAssociationsSettingsArrowsToggle: boolean
Use hideStructuralAttachmentAssociationsSettingsArrowsToggle instead
- Attribute
- visible-elements-structural-attachment-associations-settings-arrows-toggle
- Default value
- false
visibleElementsStructuralAttachmentAssociationsSettingsCapSelect
visibleElementsStructuralAttachmentAssociationsSettingsCapSelect: boolean
Use hideStructuralAttachmentAssociationsSettingsCapSelect instead
- Attribute
- visible-elements-structural-attachment-associations-settings-cap-select
- Default value
- false
visibleElementsStructuralAttachmentAssociationsSettingsColorPicker
visibleElementsStructuralAttachmentAssociationsSettingsColorPicker: boolean
Use hideStructuralAttachmentAssociationsSettingsColorPicker instead
- Attribute
- visible-elements-structural-attachment-associations-settings-color-picker
- Default value
- true
visibleElementsStructuralAttachmentAssociationsSettingsStylePicker
visibleElementsStructuralAttachmentAssociationsSettingsStylePicker: boolean
Use hideStructuralAttachmentAssociationsSettingsStylePicker instead
- Attribute
- visible-elements-structural-attachment-associations-settings-style-picker
- Default value
- true
visibleElementsStructuralAttachmentAssociationsSettingsWidthInput
visibleElementsStructuralAttachmentAssociationsSettingsWidthInput: boolean
Use hideStructuralAttachmentAssociationsSettingsWidthInput instead
- Attribute
- visible-elements-structural-attachment-associations-settings-width-input
- Default value
- true
Methods
Method | Signature |
---|---|
componentOnReady(): Promise<void> | |
destroy(): Promise<void> |
componentOnReady
componentOnReady(): Promise<void>
Create a promise that resolves once component is fully loaded.
- Returns
- Promise<void>
Events
Event | Type |
---|---|
undefined |