@saschabrunnerch/arcgis-maps-sdk-js-ai-context 0.0.1 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/README.md +163 -201
  2. package/bin/cli.js +157 -173
  3. package/contexts/4.34/{claude → skills}/arcgis-3d-advanced/SKILL.md +586 -586
  4. package/contexts/4.34/{claude → skills}/arcgis-advanced-layers/SKILL.md +431 -431
  5. package/contexts/4.34/{claude → skills}/arcgis-analysis-services/SKILL.md +607 -607
  6. package/contexts/4.34/{claude → skills}/arcgis-authentication/SKILL.md +301 -301
  7. package/contexts/4.34/{claude → skills}/arcgis-cim-symbols/SKILL.md +486 -486
  8. package/contexts/4.34/{claude → skills}/arcgis-coordinates-projection/SKILL.md +406 -406
  9. package/contexts/4.34/{claude → skills}/arcgis-core-maps/SKILL.md +739 -739
  10. package/contexts/4.34/{claude → skills}/arcgis-core-utilities/SKILL.md +732 -732
  11. package/contexts/4.34/{claude → skills}/arcgis-custom-rendering/SKILL.md +445 -445
  12. package/contexts/4.34/{claude → skills}/arcgis-editing-advanced/SKILL.md +702 -702
  13. package/contexts/4.34/{claude → skills}/arcgis-feature-effects/SKILL.md +393 -393
  14. package/contexts/4.34/{claude → skills}/arcgis-geometry-operations/SKILL.md +489 -489
  15. package/contexts/4.34/{claude → skills}/arcgis-imagery/SKILL.md +307 -307
  16. package/contexts/4.34/{claude → skills}/arcgis-interaction/SKILL.md +572 -572
  17. package/contexts/4.34/{claude → skills}/arcgis-knowledge-graphs/SKILL.md +582 -582
  18. package/contexts/4.34/{claude → skills}/arcgis-layers/SKILL.md +601 -601
  19. package/contexts/4.34/{claude → skills}/arcgis-map-tools/SKILL.md +668 -668
  20. package/contexts/4.34/{claude → skills}/arcgis-media-layers/SKILL.md +290 -290
  21. package/contexts/4.34/{claude → skills}/arcgis-portal-content/SKILL.md +679 -679
  22. package/contexts/4.34/{claude → skills}/arcgis-scene-effects/SKILL.md +512 -512
  23. package/contexts/4.34/{claude → skills}/arcgis-smart-mapping/SKILL.md +686 -686
  24. package/contexts/4.34/skills/arcgis-starter-app/SKILL.md +273 -0
  25. package/contexts/4.34/skills/arcgis-starter-app-extended/SKILL.md +649 -0
  26. package/contexts/4.34/{claude → skills}/arcgis-tables-forms/SKILL.md +877 -877
  27. package/contexts/4.34/{claude → skills}/arcgis-time-animation/SKILL.md +722 -722
  28. package/contexts/4.34/{claude → skills}/arcgis-utility-networks/SKILL.md +301 -301
  29. package/contexts/4.34/{claude → skills}/arcgis-visualization/SKILL.md +580 -580
  30. package/contexts/4.34/{claude → skills}/arcgis-widgets-ui/SKILL.md +574 -574
  31. package/lib/installer.js +294 -379
  32. package/package.json +45 -45
  33. package/contexts/4.34/copilot/arcgis-3d.instructions.md +0 -267
  34. package/contexts/4.34/copilot/arcgis-analysis.instructions.md +0 -294
  35. package/contexts/4.34/copilot/arcgis-arcade.instructions.md +0 -234
  36. package/contexts/4.34/copilot/arcgis-authentication.instructions.md +0 -187
  37. package/contexts/4.34/copilot/arcgis-cim-symbols.instructions.md +0 -177
  38. package/contexts/4.34/copilot/arcgis-core-maps.instructions.md +0 -246
  39. package/contexts/4.34/copilot/arcgis-core-utilities.instructions.md +0 -247
  40. package/contexts/4.34/copilot/arcgis-editing.instructions.md +0 -262
  41. package/contexts/4.34/copilot/arcgis-geometry.instructions.md +0 -225
  42. package/contexts/4.34/copilot/arcgis-layers.instructions.md +0 -278
  43. package/contexts/4.34/copilot/arcgis-popup-templates.instructions.md +0 -266
  44. package/contexts/4.34/copilot/arcgis-portal-advanced.instructions.md +0 -275
  45. package/contexts/4.34/copilot/arcgis-smart-mapping.instructions.md +0 -184
  46. package/contexts/4.34/copilot/arcgis-time-animation.instructions.md +0 -112
  47. package/contexts/4.34/copilot/arcgis-visualization.instructions.md +0 -321
  48. package/contexts/4.34/copilot/arcgis-widgets-ui.instructions.md +0 -277
  49. /package/contexts/4.34/{claude → skills}/arcgis-arcade/SKILL.md +0 -0
  50. /package/contexts/4.34/{claude → skills}/arcgis-popup-templates/SKILL.md +0 -0
@@ -1,301 +1,301 @@
1
- ---
2
- name: arcgis-utility-networks
3
- description: Work with ArcGIS Utility Networks for modeling and analyzing connected infrastructure. Use for network tracing, associations, and utility asset management.
4
- ---
5
-
6
- # ArcGIS Utility Networks
7
-
8
- Use this skill for working with utility networks, tracing, and associations visualization.
9
-
10
- ## Utility Network Basics
11
-
12
- Utility networks model connected infrastructure like electric, gas, water, and telecom systems. Key concepts:
13
- - **Network tracing** - Follow connectivity through the network
14
- - **Associations** - Relationships between network features (connectivity, containment, structural attachment)
15
- - **Subnetworks** - Isolated portions of the network
16
-
17
- ## Map Components Approach
18
-
19
- ### Utility Network Trace Component
20
- ```html
21
- <arcgis-map item-id="471eb0bf37074b1fbb972b1da70fb310">
22
- <arcgis-utility-network-trace slot="top-right"></arcgis-utility-network-trace>
23
- </arcgis-map>
24
- ```
25
-
26
- ### Utility Network Associations Component
27
- ```html
28
- <arcgis-map item-id="e53b1054b29f4579baf878dcf2effe7a">
29
- <arcgis-utility-network-associations slot="top-right"></arcgis-utility-network-associations>
30
- </arcgis-map>
31
- ```
32
-
33
- ## Core API Approach
34
-
35
- ### UtilityNetworkTrace Widget
36
- ```javascript
37
- import WebMap from "@arcgis/core/WebMap.js";
38
- import MapView from "@arcgis/core/views/MapView.js";
39
- import UtilityNetworkTrace from "@arcgis/core/widgets/UtilityNetworkTrace.js";
40
- import esriConfig from "@arcgis/core/config.js";
41
-
42
- // Configure portal (required for secured utility network services)
43
- esriConfig.portalUrl = "https://www.arcgis.com";
44
-
45
- // Load WebMap containing utility network
46
- const webmap = new WebMap({
47
- portalItem: {
48
- id: "YOUR_WEBMAP_ID"
49
- }
50
- });
51
-
52
- const view = new MapView({
53
- container: "viewDiv",
54
- map: webmap
55
- });
56
-
57
- // Create trace widget
58
- const utilityNetworkTrace = new UtilityNetworkTrace({
59
- view: view
60
- });
61
-
62
- view.ui.add(utilityNetworkTrace, "top-right");
63
- ```
64
-
65
- ### UtilityNetworkAssociations Widget
66
- ```javascript
67
- import WebMap from "@arcgis/core/WebMap.js";
68
- import MapView from "@arcgis/core/views/MapView.js";
69
- import UtilityNetworkAssociations from "@arcgis/core/widgets/UtilityNetworkAssociations.js";
70
- import TileInfo from "@arcgis/core/layers/support/TileInfo.js";
71
-
72
- const webMap = new WebMap({
73
- portalItem: {
74
- id: "YOUR_WEBMAP_ID"
75
- }
76
- });
77
-
78
- // Create TileInfo for high zoom levels (required to see associations)
79
- const tileInfo = TileInfo.create({
80
- spatialReference: { wkid: 102100 },
81
- numLODs: 32
82
- });
83
-
84
- const view = new MapView({
85
- container: "viewDiv",
86
- map: webMap,
87
- zoom: 25,
88
- constraints: {
89
- lods: tileInfo.lods,
90
- snapToZoom: false
91
- }
92
- });
93
-
94
- view.when(async () => {
95
- await webMap.load();
96
-
97
- // Check if webMap contains utility networks
98
- if (webMap.utilityNetworks.length > 0) {
99
- const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
100
- await utilityNetwork.load();
101
-
102
- const unAssociations = new UtilityNetworkAssociations({
103
- view,
104
- utilityNetwork
105
- });
106
-
107
- view.ui.add(unAssociations, "top-right");
108
- }
109
- });
110
- ```
111
-
112
- ## Accessing Utility Networks
113
-
114
- ### Get Utility Network from WebMap
115
- ```javascript
116
- await webMap.load();
117
-
118
- // Check for utility networks
119
- if (webMap.utilityNetworks && webMap.utilityNetworks.length > 0) {
120
- const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
121
- await utilityNetwork.load();
122
-
123
- console.log("Network name:", utilityNetwork.networkName);
124
- console.log("Tier definitions:", utilityNetwork.definition.tierDefinitions);
125
- }
126
- ```
127
-
128
- ### Utility Network Properties
129
- ```javascript
130
- const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
131
- await utilityNetwork.load();
132
-
133
- // Access network definition
134
- const definition = utilityNetwork.definition;
135
- console.log("Domain networks:", definition.domainNetworks);
136
- console.log("Terminal configurations:", definition.terminalConfigurations);
137
- console.log("Network attributes:", definition.networkAttributes);
138
- ```
139
-
140
- ## Associations Widget Configuration
141
-
142
- ### Visible Elements
143
- ```javascript
144
- const unAssociations = new UtilityNetworkAssociations({
145
- view,
146
- utilityNetwork,
147
- visibleElements: {
148
- maxAllowableAssociationsSlider: true,
149
- connectivityAssociationsSettings: {
150
- arrowsToggle: false,
151
- capSelect: false,
152
- colorPicker: true,
153
- stylePicker: true,
154
- widthInput: true
155
- },
156
- structuralAttachmentAssociationsSettings: {
157
- arrowsToggle: false,
158
- capSelect: false,
159
- colorPicker: true,
160
- stylePicker: true,
161
- widthInput: true
162
- }
163
- }
164
- });
165
- ```
166
-
167
- ### Association Types
168
- ```javascript
169
- // Connectivity - electrical/flow connections
170
- // Containment - features inside other features
171
- // Structural Attachment - features attached to structures
172
-
173
- const unAssociations = new UtilityNetworkAssociations({
174
- view,
175
- utilityNetwork,
176
- associationTypes: ["connectivity", "structural-attachment"]
177
- });
178
- ```
179
-
180
- ## Network Tracing
181
-
182
- ### Trace Widget Configuration
183
- ```javascript
184
- const utilityNetworkTrace = new UtilityNetworkTrace({
185
- view: view,
186
- // Optional: specify which traces are available
187
- showSelectionAttributes: true,
188
- selectOnComplete: true
189
- });
190
- ```
191
-
192
- ### Trace Types
193
- Common trace types available in utility networks:
194
- - **Connected** - Find all connected features
195
- - **Upstream** - Trace toward sources
196
- - **Downstream** - Trace away from sources
197
- - **Subnetwork** - Find features in same subnetwork
198
- - **Isolation** - Find isolation points
199
- - **Loops** - Find loops in network
200
-
201
- ## High Zoom Level Support
202
-
203
- Associations are only visible at high zoom levels. Configure additional LODs:
204
-
205
- ```javascript
206
- import TileInfo from "@arcgis/core/layers/support/TileInfo.js";
207
-
208
- // Create tile info with 32 LODs for extreme zoom
209
- const tileInfo = TileInfo.create({
210
- spatialReference: { wkid: 102100 },
211
- numLODs: 32
212
- });
213
-
214
- const view = new MapView({
215
- container: "viewDiv",
216
- map: webMap,
217
- zoom: 25, // High zoom to see associations
218
- constraints: {
219
- lods: tileInfo.lods,
220
- snapToZoom: false
221
- }
222
- });
223
- ```
224
-
225
- ## Complete Example
226
-
227
- ```html
228
- <!DOCTYPE html>
229
- <html>
230
- <head>
231
- <meta charset="utf-8" />
232
- <title>Utility Network</title>
233
- <link rel="stylesheet" href="https://js.arcgis.com/4.34/esri/themes/light/main.css" />
234
- <script src="https://js.arcgis.com/4.34/"></script>
235
- <style>
236
- html, body, #viewDiv { height: 100%; margin: 0; }
237
- </style>
238
- <script type="module">
239
- import WebMap from "@arcgis/core/WebMap.js";
240
- import MapView from "@arcgis/core/views/MapView.js";
241
- import UtilityNetworkTrace from "@arcgis/core/widgets/UtilityNetworkTrace.js";
242
- import UtilityNetworkAssociations from "@arcgis/core/widgets/UtilityNetworkAssociations.js";
243
- import TileInfo from "@arcgis/core/layers/support/TileInfo.js";
244
-
245
- const webMap = new WebMap({
246
- portalItem: { id: "YOUR_WEBMAP_ID" }
247
- });
248
-
249
- const tileInfo = TileInfo.create({
250
- spatialReference: { wkid: 102100 },
251
- numLODs: 32
252
- });
253
-
254
- const view = new MapView({
255
- container: "viewDiv",
256
- map: webMap,
257
- constraints: {
258
- lods: tileInfo.lods,
259
- snapToZoom: false
260
- }
261
- });
262
-
263
- view.when(async () => {
264
- await webMap.load();
265
-
266
- if (webMap.utilityNetworks.length > 0) {
267
- const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
268
- await utilityNetwork.load();
269
-
270
- // Add trace widget
271
- const trace = new UtilityNetworkTrace({ view });
272
- view.ui.add(trace, "top-right");
273
-
274
- // Add associations widget
275
- const associations = new UtilityNetworkAssociations({
276
- view,
277
- utilityNetwork
278
- });
279
- view.ui.add(associations, "bottom-right");
280
- }
281
- });
282
- </script>
283
- </head>
284
- <body>
285
- <div id="viewDiv"></div>
286
- </body>
287
- </html>
288
- ```
289
-
290
- ## Common Pitfalls
291
-
292
- 1. **Authentication required**: Utility network services typically require authentication
293
-
294
- 2. **WebMap required**: Utility networks must be accessed through a WebMap - they cannot be created client-side
295
-
296
- 3. **High zoom for associations**: Associations only display at very high zoom levels (use TileInfo with 32+ LODs)
297
-
298
- 4. **Load order**: Must load WebMap, then load UtilityNetwork before using widgets
299
-
300
- 5. **Enterprise portals**: Often hosted on ArcGIS Enterprise - configure `esriConfig.portalUrl`
301
-
1
+ ---
2
+ name: arcgis-utility-networks
3
+ description: Work with ArcGIS Utility Networks for modeling and analyzing connected infrastructure. Use for network tracing, associations, and utility asset management.
4
+ ---
5
+
6
+ # ArcGIS Utility Networks
7
+
8
+ Use this skill for working with utility networks, tracing, and associations visualization.
9
+
10
+ ## Utility Network Basics
11
+
12
+ Utility networks model connected infrastructure like electric, gas, water, and telecom systems. Key concepts:
13
+ - **Network tracing** - Follow connectivity through the network
14
+ - **Associations** - Relationships between network features (connectivity, containment, structural attachment)
15
+ - **Subnetworks** - Isolated portions of the network
16
+
17
+ ## Map Components Approach
18
+
19
+ ### Utility Network Trace Component
20
+ ```html
21
+ <arcgis-map item-id="471eb0bf37074b1fbb972b1da70fb310">
22
+ <arcgis-utility-network-trace slot="top-right"></arcgis-utility-network-trace>
23
+ </arcgis-map>
24
+ ```
25
+
26
+ ### Utility Network Associations Component
27
+ ```html
28
+ <arcgis-map item-id="e53b1054b29f4579baf878dcf2effe7a">
29
+ <arcgis-utility-network-associations slot="top-right"></arcgis-utility-network-associations>
30
+ </arcgis-map>
31
+ ```
32
+
33
+ ## Core API Approach
34
+
35
+ ### UtilityNetworkTrace Widget
36
+ ```javascript
37
+ import WebMap from "@arcgis/core/WebMap.js";
38
+ import MapView from "@arcgis/core/views/MapView.js";
39
+ import UtilityNetworkTrace from "@arcgis/core/widgets/UtilityNetworkTrace.js";
40
+ import esriConfig from "@arcgis/core/config.js";
41
+
42
+ // Configure portal (required for secured utility network services)
43
+ esriConfig.portalUrl = "https://www.arcgis.com";
44
+
45
+ // Load WebMap containing utility network
46
+ const webmap = new WebMap({
47
+ portalItem: {
48
+ id: "YOUR_WEBMAP_ID"
49
+ }
50
+ });
51
+
52
+ const view = new MapView({
53
+ container: "viewDiv",
54
+ map: webmap
55
+ });
56
+
57
+ // Create trace widget
58
+ const utilityNetworkTrace = new UtilityNetworkTrace({
59
+ view: view
60
+ });
61
+
62
+ view.ui.add(utilityNetworkTrace, "top-right");
63
+ ```
64
+
65
+ ### UtilityNetworkAssociations Widget
66
+ ```javascript
67
+ import WebMap from "@arcgis/core/WebMap.js";
68
+ import MapView from "@arcgis/core/views/MapView.js";
69
+ import UtilityNetworkAssociations from "@arcgis/core/widgets/UtilityNetworkAssociations.js";
70
+ import TileInfo from "@arcgis/core/layers/support/TileInfo.js";
71
+
72
+ const webMap = new WebMap({
73
+ portalItem: {
74
+ id: "YOUR_WEBMAP_ID"
75
+ }
76
+ });
77
+
78
+ // Create TileInfo for high zoom levels (required to see associations)
79
+ const tileInfo = TileInfo.create({
80
+ spatialReference: { wkid: 102100 },
81
+ numLODs: 32
82
+ });
83
+
84
+ const view = new MapView({
85
+ container: "viewDiv",
86
+ map: webMap,
87
+ zoom: 25,
88
+ constraints: {
89
+ lods: tileInfo.lods,
90
+ snapToZoom: false
91
+ }
92
+ });
93
+
94
+ view.when(async () => {
95
+ await webMap.load();
96
+
97
+ // Check if webMap contains utility networks
98
+ if (webMap.utilityNetworks.length > 0) {
99
+ const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
100
+ await utilityNetwork.load();
101
+
102
+ const unAssociations = new UtilityNetworkAssociations({
103
+ view,
104
+ utilityNetwork
105
+ });
106
+
107
+ view.ui.add(unAssociations, "top-right");
108
+ }
109
+ });
110
+ ```
111
+
112
+ ## Accessing Utility Networks
113
+
114
+ ### Get Utility Network from WebMap
115
+ ```javascript
116
+ await webMap.load();
117
+
118
+ // Check for utility networks
119
+ if (webMap.utilityNetworks && webMap.utilityNetworks.length > 0) {
120
+ const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
121
+ await utilityNetwork.load();
122
+
123
+ console.log("Network name:", utilityNetwork.networkName);
124
+ console.log("Tier definitions:", utilityNetwork.definition.tierDefinitions);
125
+ }
126
+ ```
127
+
128
+ ### Utility Network Properties
129
+ ```javascript
130
+ const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
131
+ await utilityNetwork.load();
132
+
133
+ // Access network definition
134
+ const definition = utilityNetwork.definition;
135
+ console.log("Domain networks:", definition.domainNetworks);
136
+ console.log("Terminal configurations:", definition.terminalConfigurations);
137
+ console.log("Network attributes:", definition.networkAttributes);
138
+ ```
139
+
140
+ ## Associations Widget Configuration
141
+
142
+ ### Visible Elements
143
+ ```javascript
144
+ const unAssociations = new UtilityNetworkAssociations({
145
+ view,
146
+ utilityNetwork,
147
+ visibleElements: {
148
+ maxAllowableAssociationsSlider: true,
149
+ connectivityAssociationsSettings: {
150
+ arrowsToggle: false,
151
+ capSelect: false,
152
+ colorPicker: true,
153
+ stylePicker: true,
154
+ widthInput: true
155
+ },
156
+ structuralAttachmentAssociationsSettings: {
157
+ arrowsToggle: false,
158
+ capSelect: false,
159
+ colorPicker: true,
160
+ stylePicker: true,
161
+ widthInput: true
162
+ }
163
+ }
164
+ });
165
+ ```
166
+
167
+ ### Association Types
168
+ ```javascript
169
+ // Connectivity - electrical/flow connections
170
+ // Containment - features inside other features
171
+ // Structural Attachment - features attached to structures
172
+
173
+ const unAssociations = new UtilityNetworkAssociations({
174
+ view,
175
+ utilityNetwork,
176
+ associationTypes: ["connectivity", "structural-attachment"]
177
+ });
178
+ ```
179
+
180
+ ## Network Tracing
181
+
182
+ ### Trace Widget Configuration
183
+ ```javascript
184
+ const utilityNetworkTrace = new UtilityNetworkTrace({
185
+ view: view,
186
+ // Optional: specify which traces are available
187
+ showSelectionAttributes: true,
188
+ selectOnComplete: true
189
+ });
190
+ ```
191
+
192
+ ### Trace Types
193
+ Common trace types available in utility networks:
194
+ - **Connected** - Find all connected features
195
+ - **Upstream** - Trace toward sources
196
+ - **Downstream** - Trace away from sources
197
+ - **Subnetwork** - Find features in same subnetwork
198
+ - **Isolation** - Find isolation points
199
+ - **Loops** - Find loops in network
200
+
201
+ ## High Zoom Level Support
202
+
203
+ Associations are only visible at high zoom levels. Configure additional LODs:
204
+
205
+ ```javascript
206
+ import TileInfo from "@arcgis/core/layers/support/TileInfo.js";
207
+
208
+ // Create tile info with 32 LODs for extreme zoom
209
+ const tileInfo = TileInfo.create({
210
+ spatialReference: { wkid: 102100 },
211
+ numLODs: 32
212
+ });
213
+
214
+ const view = new MapView({
215
+ container: "viewDiv",
216
+ map: webMap,
217
+ zoom: 25, // High zoom to see associations
218
+ constraints: {
219
+ lods: tileInfo.lods,
220
+ snapToZoom: false
221
+ }
222
+ });
223
+ ```
224
+
225
+ ## Complete Example
226
+
227
+ ```html
228
+ <!DOCTYPE html>
229
+ <html>
230
+ <head>
231
+ <meta charset="utf-8" />
232
+ <title>Utility Network</title>
233
+ <link rel="stylesheet" href="https://js.arcgis.com/4.34/esri/themes/light/main.css" />
234
+ <script src="https://js.arcgis.com/4.34/"></script>
235
+ <style>
236
+ html, body, #viewDiv { height: 100%; margin: 0; }
237
+ </style>
238
+ <script type="module">
239
+ import WebMap from "@arcgis/core/WebMap.js";
240
+ import MapView from "@arcgis/core/views/MapView.js";
241
+ import UtilityNetworkTrace from "@arcgis/core/widgets/UtilityNetworkTrace.js";
242
+ import UtilityNetworkAssociations from "@arcgis/core/widgets/UtilityNetworkAssociations.js";
243
+ import TileInfo from "@arcgis/core/layers/support/TileInfo.js";
244
+
245
+ const webMap = new WebMap({
246
+ portalItem: { id: "YOUR_WEBMAP_ID" }
247
+ });
248
+
249
+ const tileInfo = TileInfo.create({
250
+ spatialReference: { wkid: 102100 },
251
+ numLODs: 32
252
+ });
253
+
254
+ const view = new MapView({
255
+ container: "viewDiv",
256
+ map: webMap,
257
+ constraints: {
258
+ lods: tileInfo.lods,
259
+ snapToZoom: false
260
+ }
261
+ });
262
+
263
+ view.when(async () => {
264
+ await webMap.load();
265
+
266
+ if (webMap.utilityNetworks.length > 0) {
267
+ const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
268
+ await utilityNetwork.load();
269
+
270
+ // Add trace widget
271
+ const trace = new UtilityNetworkTrace({ view });
272
+ view.ui.add(trace, "top-right");
273
+
274
+ // Add associations widget
275
+ const associations = new UtilityNetworkAssociations({
276
+ view,
277
+ utilityNetwork
278
+ });
279
+ view.ui.add(associations, "bottom-right");
280
+ }
281
+ });
282
+ </script>
283
+ </head>
284
+ <body>
285
+ <div id="viewDiv"></div>
286
+ </body>
287
+ </html>
288
+ ```
289
+
290
+ ## Common Pitfalls
291
+
292
+ 1. **Authentication required**: Utility network services typically require authentication
293
+
294
+ 2. **WebMap required**: Utility networks must be accessed through a WebMap - they cannot be created client-side
295
+
296
+ 3. **High zoom for associations**: Associations only display at very high zoom levels (use TileInfo with 32+ LODs)
297
+
298
+ 4. **Load order**: Must load WebMap, then load UtilityNetwork before using widgets
299
+
300
+ 5. **Enterprise portals**: Often hosted on ArcGIS Enterprise - configure `esriConfig.portalUrl`
301
+