@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.
- package/README.md +163 -201
- package/bin/cli.js +157 -173
- package/contexts/4.34/{claude → skills}/arcgis-3d-advanced/SKILL.md +586 -586
- package/contexts/4.34/{claude → skills}/arcgis-advanced-layers/SKILL.md +431 -431
- package/contexts/4.34/{claude → skills}/arcgis-analysis-services/SKILL.md +607 -607
- package/contexts/4.34/{claude → skills}/arcgis-authentication/SKILL.md +301 -301
- package/contexts/4.34/{claude → skills}/arcgis-cim-symbols/SKILL.md +486 -486
- package/contexts/4.34/{claude → skills}/arcgis-coordinates-projection/SKILL.md +406 -406
- package/contexts/4.34/{claude → skills}/arcgis-core-maps/SKILL.md +739 -739
- package/contexts/4.34/{claude → skills}/arcgis-core-utilities/SKILL.md +732 -732
- package/contexts/4.34/{claude → skills}/arcgis-custom-rendering/SKILL.md +445 -445
- package/contexts/4.34/{claude → skills}/arcgis-editing-advanced/SKILL.md +702 -702
- package/contexts/4.34/{claude → skills}/arcgis-feature-effects/SKILL.md +393 -393
- package/contexts/4.34/{claude → skills}/arcgis-geometry-operations/SKILL.md +489 -489
- package/contexts/4.34/{claude → skills}/arcgis-imagery/SKILL.md +307 -307
- package/contexts/4.34/{claude → skills}/arcgis-interaction/SKILL.md +572 -572
- package/contexts/4.34/{claude → skills}/arcgis-knowledge-graphs/SKILL.md +582 -582
- package/contexts/4.34/{claude → skills}/arcgis-layers/SKILL.md +601 -601
- package/contexts/4.34/{claude → skills}/arcgis-map-tools/SKILL.md +668 -668
- package/contexts/4.34/{claude → skills}/arcgis-media-layers/SKILL.md +290 -290
- package/contexts/4.34/{claude → skills}/arcgis-portal-content/SKILL.md +679 -679
- package/contexts/4.34/{claude → skills}/arcgis-scene-effects/SKILL.md +512 -512
- package/contexts/4.34/{claude → skills}/arcgis-smart-mapping/SKILL.md +686 -686
- package/contexts/4.34/skills/arcgis-starter-app/SKILL.md +273 -0
- package/contexts/4.34/skills/arcgis-starter-app-extended/SKILL.md +649 -0
- package/contexts/4.34/{claude → skills}/arcgis-tables-forms/SKILL.md +877 -877
- package/contexts/4.34/{claude → skills}/arcgis-time-animation/SKILL.md +722 -722
- package/contexts/4.34/{claude → skills}/arcgis-utility-networks/SKILL.md +301 -301
- package/contexts/4.34/{claude → skills}/arcgis-visualization/SKILL.md +580 -580
- package/contexts/4.34/{claude → skills}/arcgis-widgets-ui/SKILL.md +574 -574
- package/lib/installer.js +294 -379
- package/package.json +45 -45
- package/contexts/4.34/copilot/arcgis-3d.instructions.md +0 -267
- package/contexts/4.34/copilot/arcgis-analysis.instructions.md +0 -294
- package/contexts/4.34/copilot/arcgis-arcade.instructions.md +0 -234
- package/contexts/4.34/copilot/arcgis-authentication.instructions.md +0 -187
- package/contexts/4.34/copilot/arcgis-cim-symbols.instructions.md +0 -177
- package/contexts/4.34/copilot/arcgis-core-maps.instructions.md +0 -246
- package/contexts/4.34/copilot/arcgis-core-utilities.instructions.md +0 -247
- package/contexts/4.34/copilot/arcgis-editing.instructions.md +0 -262
- package/contexts/4.34/copilot/arcgis-geometry.instructions.md +0 -225
- package/contexts/4.34/copilot/arcgis-layers.instructions.md +0 -278
- package/contexts/4.34/copilot/arcgis-popup-templates.instructions.md +0 -266
- package/contexts/4.34/copilot/arcgis-portal-advanced.instructions.md +0 -275
- package/contexts/4.34/copilot/arcgis-smart-mapping.instructions.md +0 -184
- package/contexts/4.34/copilot/arcgis-time-animation.instructions.md +0 -112
- package/contexts/4.34/copilot/arcgis-visualization.instructions.md +0 -321
- package/contexts/4.34/copilot/arcgis-widgets-ui.instructions.md +0 -277
- /package/contexts/4.34/{claude → skills}/arcgis-arcade/SKILL.md +0 -0
- /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
|
+
|