@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,431 +1,431 @@
1
- ---
2
- name: arcgis-advanced-layers
3
- description: Work with advanced layer types including WMS, WFS, WMTS, OGCFeatureLayer, MapImageLayer, CatalogLayer, and dynamic data layers. Use for OGC services and server-side rendering.
4
- ---
5
-
6
- # ArcGIS Advanced Layers
7
-
8
- Use this skill for working with OGC services, MapImageLayer, CatalogLayer, and dynamic data layers.
9
-
10
- ## WMSLayer (Web Map Service)
11
-
12
- ### Basic WMSLayer
13
- ```javascript
14
- import WMSLayer from "@arcgis/core/layers/WMSLayer.js";
15
-
16
- const layer = new WMSLayer({
17
- url: "https://ows.terrestris.de/osm/service"
18
- });
19
-
20
- await layer.load();
21
-
22
- // Find and use a specific sublayer
23
- const sublayer = layer.findSublayerByName("OSM-WMS");
24
- if (sublayer) {
25
- layer.sublayers = [sublayer];
26
- }
27
-
28
- map.add(layer);
29
- ```
30
-
31
- ### WMSLayer as Basemap (Map Component)
32
- ```html
33
- <arcgis-scene>
34
- <arcgis-zoom slot="top-left"></arcgis-zoom>
35
- </arcgis-scene>
36
-
37
- <script type="module">
38
- import WMSLayer from "@arcgis/core/layers/WMSLayer.js";
39
- const viewElement = document.querySelector("arcgis-scene");
40
-
41
- const layer = new WMSLayer({
42
- url: "https://ows.terrestris.de/osm/service"
43
- });
44
-
45
- await layer.load();
46
- const sublayer = layer.findSublayerByName("OSM-WMS");
47
- if (sublayer) {
48
- layer.sublayers = [sublayer];
49
- }
50
-
51
- viewElement.map = {
52
- basemap: {
53
- baseLayers: [layer],
54
- title: "WMS Layer"
55
- }
56
- };
57
- </script>
58
- ```
59
-
60
- ## WFSLayer (Web Feature Service)
61
-
62
- ### Basic WFSLayer
63
- ```javascript
64
- import WFSLayer from "@arcgis/core/layers/WFSLayer.js";
65
-
66
- const layer = new WFSLayer({
67
- url: "https://geobretagne.fr/geoserver/ows",
68
- name: "fma:bvme_zhp_vs_culture",
69
- copyright: "GéoBretagne"
70
- });
71
-
72
- map.add(layer);
73
- ```
74
-
75
- ### WFS Capabilities
76
- ```javascript
77
- import WFSLayer from "@arcgis/core/layers/WFSLayer.js";
78
- import wfsUtils from "@arcgis/core/layers/ogc/wfsUtils.js";
79
-
80
- // Get capabilities from WFS endpoint
81
- const capabilities = await wfsUtils.getCapabilities("https://geobretagne.fr/geoserver/ows");
82
-
83
- // List available feature types
84
- capabilities.featureTypes.forEach(featureType => {
85
- console.log(featureType.title, featureType.name);
86
- });
87
-
88
- // Create layer from specific feature type
89
- const layerInfo = await wfsUtils.getWFSLayerInfo(capabilities, "featureTypeName");
90
- const layer = WFSLayer.fromWFSLayerInfo(layerInfo);
91
- map.add(layer);
92
- ```
93
-
94
- ## WMTSLayer (Web Map Tile Service)
95
-
96
- ### Basic WMTSLayer
97
- ```javascript
98
- import WMTSLayer from "@arcgis/core/layers/WMTSLayer.js";
99
-
100
- const layer = new WMTSLayer({
101
- url: "https://www.ign.es/wmts/ign-base",
102
- activeLayer: {
103
- id: "IGNBase-gris",
104
- tileMatrixSetId: "GoogleMapsCompatible"
105
- },
106
- serviceMode: "KVP",
107
- copyright: "Instituto Geográfico Nacional"
108
- });
109
-
110
- map.add(layer);
111
- ```
112
-
113
- ### WMTSLayer as Basemap
114
- ```javascript
115
- import Basemap from "@arcgis/core/Basemap.js";
116
- import WMTSLayer from "@arcgis/core/layers/WMTSLayer.js";
117
-
118
- const wmtsBasemap = new Basemap({
119
- baseLayers: [
120
- new WMTSLayer({
121
- url: "https://www.ign.es/wmts/ign-base",
122
- activeLayer: { id: "IGNBase-gris", tileMatrixSetId: "GoogleMapsCompatible" },
123
- serviceMode: "KVP"
124
- })
125
- ],
126
- thumbnailUrl: "https://example.com/thumbnail.jpg"
127
- });
128
-
129
- const map = new Map({
130
- basemap: wmtsBasemap
131
- });
132
- ```
133
-
134
- ## OGCFeatureLayer
135
-
136
- ### Basic OGCFeatureLayer
137
- ```javascript
138
- import OGCFeatureLayer from "@arcgis/core/layers/OGCFeatureLayer.js";
139
-
140
- const layer = new OGCFeatureLayer({
141
- url: "https://demo.ldproxy.net/vineyards", // OGC API landing page
142
- collectionId: "vineyards", // Collection ID
143
- minScale: 5000000,
144
- renderer: {
145
- type: "simple",
146
- symbol: {
147
- type: "simple-fill",
148
- color: [76, 129, 64, 0.6]
149
- }
150
- },
151
- popupTemplate: {
152
- title: "{name}",
153
- content: "Area: {area_ha} hectares"
154
- }
155
- });
156
-
157
- map.add(layer);
158
- ```
159
-
160
- ### OGCFeatureLayer with Labeling
161
- ```javascript
162
- const layer = new OGCFeatureLayer({
163
- url: "https://demo.ldproxy.net/vineyards",
164
- collectionId: "vineyards",
165
- labelingInfo: [{
166
- labelExpressionInfo: {
167
- expression: "$feature.NAME"
168
- },
169
- symbol: {
170
- type: "text",
171
- color: "#4a6741",
172
- haloSize: 1,
173
- haloColor: "white",
174
- font: {
175
- family: "Arial",
176
- style: "italic"
177
- }
178
- },
179
- minScale: 100000
180
- }]
181
- });
182
- ```
183
-
184
- ## MapImageLayer
185
-
186
- ### Basic MapImageLayer
187
- ```javascript
188
- import MapImageLayer from "@arcgis/core/layers/MapImageLayer.js";
189
-
190
- // From portal item
191
- const layer = new MapImageLayer({
192
- portalItem: {
193
- id: "d7892b3c13b44391992ecd42bfa92d01"
194
- }
195
- });
196
-
197
- // From URL
198
- const layer2 = new MapImageLayer({
199
- url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer"
200
- });
201
-
202
- map.add(layer);
203
- ```
204
-
205
- ### MapImageLayer with Sublayers
206
- ```javascript
207
- const layer = new MapImageLayer({
208
- url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
209
- sublayers: [
210
- { id: 2, visible: true }, // States
211
- { id: 1, visible: true }, // Highways
212
- { id: 0, visible: true } // Cities
213
- ]
214
- });
215
-
216
- // Toggle sublayer visibility
217
- layer.when(() => {
218
- const sublayer = layer.findSublayerById(1);
219
- sublayer.visible = !sublayer.visible;
220
- });
221
- ```
222
-
223
- ### MapImageLayer with Definition Expression
224
- ```javascript
225
- const layer = new MapImageLayer({
226
- url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
227
- sublayers: [{
228
- id: 0,
229
- definitionExpression: "pop2000 > 100000"
230
- }]
231
- });
232
- ```
233
-
234
- ### MapImageLayer with Custom Renderer
235
- ```javascript
236
- const layer = new MapImageLayer({
237
- url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
238
- sublayers: [{
239
- id: 2,
240
- renderer: {
241
- type: "simple",
242
- symbol: {
243
- type: "simple-fill",
244
- color: [0, 100, 200, 0.5],
245
- outline: { color: "white", width: 1 }
246
- }
247
- }
248
- }]
249
- });
250
- ```
251
-
252
- ## Dynamic Data Layers
253
-
254
- ### Data Layer from Table
255
- ```javascript
256
- const layer = new MapImageLayer({
257
- url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
258
- sublayers: [{
259
- id: 4,
260
- title: "Railroads",
261
- renderer: {
262
- type: "simple",
263
- symbol: {
264
- type: "simple-line",
265
- color: [255, 255, 255, 0.5],
266
- width: 0.75,
267
- style: "long-dash-dot-dot"
268
- }
269
- },
270
- source: {
271
- type: "data-layer",
272
- dataSource: {
273
- type: "table",
274
- workspaceId: "MyDatabaseWorkspaceIDSSR2",
275
- dataSourceName: "ss6.gdb.Railroads"
276
- }
277
- }
278
- }]
279
- });
280
- ```
281
-
282
- ### Data Layer with Table Join
283
- ```javascript
284
- const layer = new MapImageLayer({
285
- url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
286
- sublayers: [{
287
- id: 0,
288
- opacity: 0.75,
289
- source: {
290
- type: "data-layer",
291
- dataSource: {
292
- type: "join-table",
293
- // Left table: map layer with geometries
294
- leftTableSource: {
295
- type: "map-layer",
296
- mapLayerId: 3
297
- },
298
- // Right table: data table in workspace
299
- rightTableSource: {
300
- type: "data-layer",
301
- dataSource: {
302
- type: "table",
303
- workspaceId: "CensusFileGDBWorkspaceID",
304
- dataSourceName: "ancestry"
305
- }
306
- },
307
- leftTableKey: "STATE_NAME",
308
- rightTableKey: "State",
309
- joinType: "left-outer-join"
310
- }
311
- },
312
- renderer: {
313
- type: "class-breaks",
314
- field: "ancestry.Norwegian",
315
- normalizationField: "states.POP2007",
316
- classBreakInfos: [
317
- { minValue: 0, maxValue: 0.01, symbol: createSymbol("#f8e3c2") },
318
- { minValue: 0.01, maxValue: 0.05, symbol: createSymbol("#d86868") }
319
- ]
320
- }
321
- }]
322
- });
323
- ```
324
-
325
- ## CatalogLayer
326
-
327
- ### Basic CatalogLayer
328
- ```javascript
329
- import CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
330
-
331
- const layer = new CatalogLayer({
332
- portalItem: {
333
- id: "487cc66d305145d3b67fed383456af48",
334
- portal: {
335
- url: "https://jsapi.maps.arcgis.com/"
336
- }
337
- }
338
- });
339
-
340
- map.add(layer);
341
- ```
342
-
343
- ### Working with CatalogLayer Footprints
344
- ```javascript
345
- import CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
346
- import catalogUtils from "@arcgis/core/layers/catalog/catalogUtils.js";
347
-
348
- const layer = new CatalogLayer({
349
- portalItem: { id: "YOUR_CATALOG_ITEM_ID" }
350
- });
351
-
352
- map.add(layer);
353
-
354
- const layerView = await view.whenLayerView(layer);
355
-
356
- // Query all footprints
357
- const result = await layer.queryFeatures({
358
- where: "1=1",
359
- returnGeometry: true,
360
- outFields: ["*"],
361
- orderByFields: [layer.itemNameField]
362
- });
363
-
364
- // Add labels to footprint layer
365
- layer.footprintLayer.labelingInfo = [{
366
- labelExpressionInfo: {
367
- expression: "$feature." + layer.itemNameField
368
- },
369
- symbol: {
370
- type: "label-3d",
371
- symbolLayers: [{
372
- type: "text",
373
- material: { color: "white" },
374
- size: 10
375
- }]
376
- }
377
- }];
378
-
379
- // Highlight a footprint
380
- const highlight = layerView.footprintLayerView.highlight(feature);
381
-
382
- // Create layer from footprint
383
- const footprint = layer.createFootprintFromLayer(selectedLayer);
384
- const newLayer = await layer.createLayerFromFootprint(footprint);
385
- map.add(newLayer);
386
- ```
387
-
388
- ### CatalogLayer with LayerList
389
- ```javascript
390
- const layerList = document.querySelector("arcgis-layer-list");
391
-
392
- layerList.catalogOptions = {
393
- selectionMode: "single"
394
- };
395
-
396
- layerList.listItemCreatedFunction = (event) => {
397
- if (catalogUtils.isLayerFromCatalog(event.item.layer)) {
398
- event.item.actionsSections = [[{
399
- title: "Add layer to map",
400
- icon: "add-layer",
401
- id: "add-layer"
402
- }]];
403
- }
404
- };
405
- ```
406
-
407
- ## Layer Comparison
408
-
409
- | Layer Type | Use Case | Data Source |
410
- |------------|----------|-------------|
411
- | WMSLayer | Raster imagery from OGC WMS | WMS 1.1.1/1.3.0 |
412
- | WFSLayer | Vector features from OGC WFS | WFS 2.0.0 |
413
- | WMTSLayer | Cached tiles from OGC WMTS | WMTS 1.0.0 |
414
- | OGCFeatureLayer | Vector from OGC API - Features | OGC API |
415
- | MapImageLayer | Server-rendered imagery | ArcGIS Map Service |
416
- | CatalogLayer | Collection of layers | ArcGIS Catalog Service |
417
-
418
- ## Common Pitfalls
419
-
420
- 1. **WFS version**: WFSLayer requires WFS 2.0.0 with GeoJSON output format
421
-
422
- 2. **CORS**: OGC services need CORS headers or proxy configuration
423
-
424
- 3. **Sublayer IDs**: MapImageLayer sublayer IDs must match service layer IDs
425
-
426
- 4. **Dynamic data sources**: Require registered workspaces on the server
427
-
428
- 5. **CatalogLayer portal**: Must specify portal URL for non-ArcGIS Online items
429
-
430
- 6. **Field prefixes**: In joined tables, prefix field names with table name (e.g., `ancestry.Norwegian`)
431
-
1
+ ---
2
+ name: arcgis-advanced-layers
3
+ description: Work with advanced layer types including WMS, WFS, WMTS, OGCFeatureLayer, MapImageLayer, CatalogLayer, and dynamic data layers. Use for OGC services and server-side rendering.
4
+ ---
5
+
6
+ # ArcGIS Advanced Layers
7
+
8
+ Use this skill for working with OGC services, MapImageLayer, CatalogLayer, and dynamic data layers.
9
+
10
+ ## WMSLayer (Web Map Service)
11
+
12
+ ### Basic WMSLayer
13
+ ```javascript
14
+ import WMSLayer from "@arcgis/core/layers/WMSLayer.js";
15
+
16
+ const layer = new WMSLayer({
17
+ url: "https://ows.terrestris.de/osm/service"
18
+ });
19
+
20
+ await layer.load();
21
+
22
+ // Find and use a specific sublayer
23
+ const sublayer = layer.findSublayerByName("OSM-WMS");
24
+ if (sublayer) {
25
+ layer.sublayers = [sublayer];
26
+ }
27
+
28
+ map.add(layer);
29
+ ```
30
+
31
+ ### WMSLayer as Basemap (Map Component)
32
+ ```html
33
+ <arcgis-scene>
34
+ <arcgis-zoom slot="top-left"></arcgis-zoom>
35
+ </arcgis-scene>
36
+
37
+ <script type="module">
38
+ import WMSLayer from "@arcgis/core/layers/WMSLayer.js";
39
+ const viewElement = document.querySelector("arcgis-scene");
40
+
41
+ const layer = new WMSLayer({
42
+ url: "https://ows.terrestris.de/osm/service"
43
+ });
44
+
45
+ await layer.load();
46
+ const sublayer = layer.findSublayerByName("OSM-WMS");
47
+ if (sublayer) {
48
+ layer.sublayers = [sublayer];
49
+ }
50
+
51
+ viewElement.map = {
52
+ basemap: {
53
+ baseLayers: [layer],
54
+ title: "WMS Layer"
55
+ }
56
+ };
57
+ </script>
58
+ ```
59
+
60
+ ## WFSLayer (Web Feature Service)
61
+
62
+ ### Basic WFSLayer
63
+ ```javascript
64
+ import WFSLayer from "@arcgis/core/layers/WFSLayer.js";
65
+
66
+ const layer = new WFSLayer({
67
+ url: "https://geobretagne.fr/geoserver/ows",
68
+ name: "fma:bvme_zhp_vs_culture",
69
+ copyright: "GéoBretagne"
70
+ });
71
+
72
+ map.add(layer);
73
+ ```
74
+
75
+ ### WFS Capabilities
76
+ ```javascript
77
+ import WFSLayer from "@arcgis/core/layers/WFSLayer.js";
78
+ import wfsUtils from "@arcgis/core/layers/ogc/wfsUtils.js";
79
+
80
+ // Get capabilities from WFS endpoint
81
+ const capabilities = await wfsUtils.getCapabilities("https://geobretagne.fr/geoserver/ows");
82
+
83
+ // List available feature types
84
+ capabilities.featureTypes.forEach(featureType => {
85
+ console.log(featureType.title, featureType.name);
86
+ });
87
+
88
+ // Create layer from specific feature type
89
+ const layerInfo = await wfsUtils.getWFSLayerInfo(capabilities, "featureTypeName");
90
+ const layer = WFSLayer.fromWFSLayerInfo(layerInfo);
91
+ map.add(layer);
92
+ ```
93
+
94
+ ## WMTSLayer (Web Map Tile Service)
95
+
96
+ ### Basic WMTSLayer
97
+ ```javascript
98
+ import WMTSLayer from "@arcgis/core/layers/WMTSLayer.js";
99
+
100
+ const layer = new WMTSLayer({
101
+ url: "https://www.ign.es/wmts/ign-base",
102
+ activeLayer: {
103
+ id: "IGNBase-gris",
104
+ tileMatrixSetId: "GoogleMapsCompatible"
105
+ },
106
+ serviceMode: "KVP",
107
+ copyright: "Instituto Geográfico Nacional"
108
+ });
109
+
110
+ map.add(layer);
111
+ ```
112
+
113
+ ### WMTSLayer as Basemap
114
+ ```javascript
115
+ import Basemap from "@arcgis/core/Basemap.js";
116
+ import WMTSLayer from "@arcgis/core/layers/WMTSLayer.js";
117
+
118
+ const wmtsBasemap = new Basemap({
119
+ baseLayers: [
120
+ new WMTSLayer({
121
+ url: "https://www.ign.es/wmts/ign-base",
122
+ activeLayer: { id: "IGNBase-gris", tileMatrixSetId: "GoogleMapsCompatible" },
123
+ serviceMode: "KVP"
124
+ })
125
+ ],
126
+ thumbnailUrl: "https://example.com/thumbnail.jpg"
127
+ });
128
+
129
+ const map = new Map({
130
+ basemap: wmtsBasemap
131
+ });
132
+ ```
133
+
134
+ ## OGCFeatureLayer
135
+
136
+ ### Basic OGCFeatureLayer
137
+ ```javascript
138
+ import OGCFeatureLayer from "@arcgis/core/layers/OGCFeatureLayer.js";
139
+
140
+ const layer = new OGCFeatureLayer({
141
+ url: "https://demo.ldproxy.net/vineyards", // OGC API landing page
142
+ collectionId: "vineyards", // Collection ID
143
+ minScale: 5000000,
144
+ renderer: {
145
+ type: "simple",
146
+ symbol: {
147
+ type: "simple-fill",
148
+ color: [76, 129, 64, 0.6]
149
+ }
150
+ },
151
+ popupTemplate: {
152
+ title: "{name}",
153
+ content: "Area: {area_ha} hectares"
154
+ }
155
+ });
156
+
157
+ map.add(layer);
158
+ ```
159
+
160
+ ### OGCFeatureLayer with Labeling
161
+ ```javascript
162
+ const layer = new OGCFeatureLayer({
163
+ url: "https://demo.ldproxy.net/vineyards",
164
+ collectionId: "vineyards",
165
+ labelingInfo: [{
166
+ labelExpressionInfo: {
167
+ expression: "$feature.NAME"
168
+ },
169
+ symbol: {
170
+ type: "text",
171
+ color: "#4a6741",
172
+ haloSize: 1,
173
+ haloColor: "white",
174
+ font: {
175
+ family: "Arial",
176
+ style: "italic"
177
+ }
178
+ },
179
+ minScale: 100000
180
+ }]
181
+ });
182
+ ```
183
+
184
+ ## MapImageLayer
185
+
186
+ ### Basic MapImageLayer
187
+ ```javascript
188
+ import MapImageLayer from "@arcgis/core/layers/MapImageLayer.js";
189
+
190
+ // From portal item
191
+ const layer = new MapImageLayer({
192
+ portalItem: {
193
+ id: "d7892b3c13b44391992ecd42bfa92d01"
194
+ }
195
+ });
196
+
197
+ // From URL
198
+ const layer2 = new MapImageLayer({
199
+ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer"
200
+ });
201
+
202
+ map.add(layer);
203
+ ```
204
+
205
+ ### MapImageLayer with Sublayers
206
+ ```javascript
207
+ const layer = new MapImageLayer({
208
+ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
209
+ sublayers: [
210
+ { id: 2, visible: true }, // States
211
+ { id: 1, visible: true }, // Highways
212
+ { id: 0, visible: true } // Cities
213
+ ]
214
+ });
215
+
216
+ // Toggle sublayer visibility
217
+ layer.when(() => {
218
+ const sublayer = layer.findSublayerById(1);
219
+ sublayer.visible = !sublayer.visible;
220
+ });
221
+ ```
222
+
223
+ ### MapImageLayer with Definition Expression
224
+ ```javascript
225
+ const layer = new MapImageLayer({
226
+ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
227
+ sublayers: [{
228
+ id: 0,
229
+ definitionExpression: "pop2000 > 100000"
230
+ }]
231
+ });
232
+ ```
233
+
234
+ ### MapImageLayer with Custom Renderer
235
+ ```javascript
236
+ const layer = new MapImageLayer({
237
+ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
238
+ sublayers: [{
239
+ id: 2,
240
+ renderer: {
241
+ type: "simple",
242
+ symbol: {
243
+ type: "simple-fill",
244
+ color: [0, 100, 200, 0.5],
245
+ outline: { color: "white", width: 1 }
246
+ }
247
+ }
248
+ }]
249
+ });
250
+ ```
251
+
252
+ ## Dynamic Data Layers
253
+
254
+ ### Data Layer from Table
255
+ ```javascript
256
+ const layer = new MapImageLayer({
257
+ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
258
+ sublayers: [{
259
+ id: 4,
260
+ title: "Railroads",
261
+ renderer: {
262
+ type: "simple",
263
+ symbol: {
264
+ type: "simple-line",
265
+ color: [255, 255, 255, 0.5],
266
+ width: 0.75,
267
+ style: "long-dash-dot-dot"
268
+ }
269
+ },
270
+ source: {
271
+ type: "data-layer",
272
+ dataSource: {
273
+ type: "table",
274
+ workspaceId: "MyDatabaseWorkspaceIDSSR2",
275
+ dataSourceName: "ss6.gdb.Railroads"
276
+ }
277
+ }
278
+ }]
279
+ });
280
+ ```
281
+
282
+ ### Data Layer with Table Join
283
+ ```javascript
284
+ const layer = new MapImageLayer({
285
+ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
286
+ sublayers: [{
287
+ id: 0,
288
+ opacity: 0.75,
289
+ source: {
290
+ type: "data-layer",
291
+ dataSource: {
292
+ type: "join-table",
293
+ // Left table: map layer with geometries
294
+ leftTableSource: {
295
+ type: "map-layer",
296
+ mapLayerId: 3
297
+ },
298
+ // Right table: data table in workspace
299
+ rightTableSource: {
300
+ type: "data-layer",
301
+ dataSource: {
302
+ type: "table",
303
+ workspaceId: "CensusFileGDBWorkspaceID",
304
+ dataSourceName: "ancestry"
305
+ }
306
+ },
307
+ leftTableKey: "STATE_NAME",
308
+ rightTableKey: "State",
309
+ joinType: "left-outer-join"
310
+ }
311
+ },
312
+ renderer: {
313
+ type: "class-breaks",
314
+ field: "ancestry.Norwegian",
315
+ normalizationField: "states.POP2007",
316
+ classBreakInfos: [
317
+ { minValue: 0, maxValue: 0.01, symbol: createSymbol("#f8e3c2") },
318
+ { minValue: 0.01, maxValue: 0.05, symbol: createSymbol("#d86868") }
319
+ ]
320
+ }
321
+ }]
322
+ });
323
+ ```
324
+
325
+ ## CatalogLayer
326
+
327
+ ### Basic CatalogLayer
328
+ ```javascript
329
+ import CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
330
+
331
+ const layer = new CatalogLayer({
332
+ portalItem: {
333
+ id: "487cc66d305145d3b67fed383456af48",
334
+ portal: {
335
+ url: "https://jsapi.maps.arcgis.com/"
336
+ }
337
+ }
338
+ });
339
+
340
+ map.add(layer);
341
+ ```
342
+
343
+ ### Working with CatalogLayer Footprints
344
+ ```javascript
345
+ import CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
346
+ import catalogUtils from "@arcgis/core/layers/catalog/catalogUtils.js";
347
+
348
+ const layer = new CatalogLayer({
349
+ portalItem: { id: "YOUR_CATALOG_ITEM_ID" }
350
+ });
351
+
352
+ map.add(layer);
353
+
354
+ const layerView = await view.whenLayerView(layer);
355
+
356
+ // Query all footprints
357
+ const result = await layer.queryFeatures({
358
+ where: "1=1",
359
+ returnGeometry: true,
360
+ outFields: ["*"],
361
+ orderByFields: [layer.itemNameField]
362
+ });
363
+
364
+ // Add labels to footprint layer
365
+ layer.footprintLayer.labelingInfo = [{
366
+ labelExpressionInfo: {
367
+ expression: "$feature." + layer.itemNameField
368
+ },
369
+ symbol: {
370
+ type: "label-3d",
371
+ symbolLayers: [{
372
+ type: "text",
373
+ material: { color: "white" },
374
+ size: 10
375
+ }]
376
+ }
377
+ }];
378
+
379
+ // Highlight a footprint
380
+ const highlight = layerView.footprintLayerView.highlight(feature);
381
+
382
+ // Create layer from footprint
383
+ const footprint = layer.createFootprintFromLayer(selectedLayer);
384
+ const newLayer = await layer.createLayerFromFootprint(footprint);
385
+ map.add(newLayer);
386
+ ```
387
+
388
+ ### CatalogLayer with LayerList
389
+ ```javascript
390
+ const layerList = document.querySelector("arcgis-layer-list");
391
+
392
+ layerList.catalogOptions = {
393
+ selectionMode: "single"
394
+ };
395
+
396
+ layerList.listItemCreatedFunction = (event) => {
397
+ if (catalogUtils.isLayerFromCatalog(event.item.layer)) {
398
+ event.item.actionsSections = [[{
399
+ title: "Add layer to map",
400
+ icon: "add-layer",
401
+ id: "add-layer"
402
+ }]];
403
+ }
404
+ };
405
+ ```
406
+
407
+ ## Layer Comparison
408
+
409
+ | Layer Type | Use Case | Data Source |
410
+ |------------|----------|-------------|
411
+ | WMSLayer | Raster imagery from OGC WMS | WMS 1.1.1/1.3.0 |
412
+ | WFSLayer | Vector features from OGC WFS | WFS 2.0.0 |
413
+ | WMTSLayer | Cached tiles from OGC WMTS | WMTS 1.0.0 |
414
+ | OGCFeatureLayer | Vector from OGC API - Features | OGC API |
415
+ | MapImageLayer | Server-rendered imagery | ArcGIS Map Service |
416
+ | CatalogLayer | Collection of layers | ArcGIS Catalog Service |
417
+
418
+ ## Common Pitfalls
419
+
420
+ 1. **WFS version**: WFSLayer requires WFS 2.0.0 with GeoJSON output format
421
+
422
+ 2. **CORS**: OGC services need CORS headers or proxy configuration
423
+
424
+ 3. **Sublayer IDs**: MapImageLayer sublayer IDs must match service layer IDs
425
+
426
+ 4. **Dynamic data sources**: Require registered workspaces on the server
427
+
428
+ 5. **CatalogLayer portal**: Must specify portal URL for non-ArcGIS Online items
429
+
430
+ 6. **Field prefixes**: In joined tables, prefix field names with table name (e.g., `ancestry.Norwegian`)
431
+