@saschabrunnerch/arcgis-maps-sdk-js-ai-context 0.2.0 → 0.3.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.
|
@@ -517,6 +517,42 @@ if (form.valid) {
|
|
|
517
517
|
|
|
518
518
|
## Complete Example
|
|
519
519
|
|
|
520
|
+
### Map Components (Recommended)
|
|
521
|
+
|
|
522
|
+
```html
|
|
523
|
+
<!DOCTYPE html>
|
|
524
|
+
<html>
|
|
525
|
+
<head>
|
|
526
|
+
<script type="module" src="https://js.arcgis.com/calcite-components/3.3.3/calcite.esm.js"></script>
|
|
527
|
+
<script src="https://js.arcgis.com/4.34/"></script>
|
|
528
|
+
<script type="module" src="https://js.arcgis.com/4.34/map-components/"></script>
|
|
529
|
+
<style>
|
|
530
|
+
html, body { height: 100%; margin: 0; }
|
|
531
|
+
</style>
|
|
532
|
+
</head>
|
|
533
|
+
<body>
|
|
534
|
+
<arcgis-map basemap="streets-navigation-vector">
|
|
535
|
+
<arcgis-zoom slot="top-left"></arcgis-zoom>
|
|
536
|
+
<arcgis-editor slot="top-right"></arcgis-editor>
|
|
537
|
+
</arcgis-map>
|
|
538
|
+
|
|
539
|
+
<script type="module">
|
|
540
|
+
import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
|
|
541
|
+
|
|
542
|
+
const mapElement = document.querySelector("arcgis-map");
|
|
543
|
+
await mapElement.viewOnReady();
|
|
544
|
+
|
|
545
|
+
const layer = new FeatureLayer({
|
|
546
|
+
url: "https://services.arcgis.com/.../FeatureServer/0"
|
|
547
|
+
});
|
|
548
|
+
mapElement.map.add(layer);
|
|
549
|
+
</script>
|
|
550
|
+
</body>
|
|
551
|
+
</html>
|
|
552
|
+
```
|
|
553
|
+
|
|
554
|
+
### Core API
|
|
555
|
+
|
|
520
556
|
```html
|
|
521
557
|
<!DOCTYPE html>
|
|
522
558
|
<html>
|
|
@@ -525,7 +561,6 @@ if (form.valid) {
|
|
|
525
561
|
<script src="https://js.arcgis.com/4.34/"></script>
|
|
526
562
|
<style>
|
|
527
563
|
html, body, #viewDiv { height: 100%; margin: 0; }
|
|
528
|
-
#formPanel { position: absolute; top: 10px; right: 10px; width: 300px; }
|
|
529
564
|
</style>
|
|
530
565
|
<script type="module">
|
|
531
566
|
import Map from "@arcgis/core/Map.js";
|
|
@@ -7,6 +7,82 @@ description: Scaffold ArcGIS Maps SDK applications with TypeScript and Vite. Inc
|
|
|
7
7
|
|
|
8
8
|
Use this skill to create ArcGIS Maps SDK for JavaScript applications with TypeScript and Vite. Choose between a minimal setup for quick prototyping or a production-ready configuration with full tooling.
|
|
9
9
|
|
|
10
|
+
## Prerequisites
|
|
11
|
+
|
|
12
|
+
- **ArcGIS account**: An [ArcGIS Location Platform](https://developers.arcgis.com/), [ArcGIS Online](https://www.arcgis.com/), or [ArcGIS Enterprise](https://enterprise.arcgis.com/) account is required to access content and services.
|
|
13
|
+
- **Access token**: Create an access token through your portal with appropriate privileges (basemaps, geocoding, routing, etc.) and configure allowed referrers for production use.
|
|
14
|
+
- **Node.js**: LTS version (20+) with npm or pnpm.
|
|
15
|
+
|
|
16
|
+
> **Note:** As of v4.34, CSS for Map Components loads automatically when using npm — no manual CSS import for `@arcgis/map-components` is needed. The `@arcgis/core` CSS import is only required when using Core API widgets directly.
|
|
17
|
+
|
|
18
|
+
## Framework Integration
|
|
19
|
+
|
|
20
|
+
### React 19
|
|
21
|
+
|
|
22
|
+
Map Components are web components (custom elements). In React 19, use them directly and attach event listeners with the `on` prefix:
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import "@arcgis/map-components/dist/components/arcgis-map";
|
|
26
|
+
import "@arcgis/map-components/dist/components/arcgis-zoom";
|
|
27
|
+
|
|
28
|
+
function App() {
|
|
29
|
+
return (
|
|
30
|
+
<arcgis-map
|
|
31
|
+
basemap="topo-vector"
|
|
32
|
+
center="-118.24,34.05"
|
|
33
|
+
zoom={12}
|
|
34
|
+
onarcgisViewReadyChange={(e: CustomEvent) => {
|
|
35
|
+
const { view } = e.detail;
|
|
36
|
+
console.log("View ready:", view);
|
|
37
|
+
}}
|
|
38
|
+
>
|
|
39
|
+
<arcgis-zoom slot="top-left"></arcgis-zoom>
|
|
40
|
+
</arcgis-map>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
> **Important:** Use event listeners (e.g., `onarcgisViewReadyChange`) rather than calling methods directly on the element ref, since the component may not be defined yet at render time.
|
|
46
|
+
|
|
47
|
+
### Angular
|
|
48
|
+
|
|
49
|
+
Add `CUSTOM_ELEMENTS_SCHEMA` to your module or standalone component so Angular recognizes non-Angular elements:
|
|
50
|
+
|
|
51
|
+
```typescript
|
|
52
|
+
import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
|
|
53
|
+
|
|
54
|
+
@Component({
|
|
55
|
+
selector: "app-map",
|
|
56
|
+
standalone: true,
|
|
57
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
58
|
+
template: `
|
|
59
|
+
<arcgis-map basemap="topo-vector" center="-118.24,34.05" [zoom]="12">
|
|
60
|
+
<arcgis-zoom slot="top-left"></arcgis-zoom>
|
|
61
|
+
</arcgis-map>
|
|
62
|
+
`,
|
|
63
|
+
})
|
|
64
|
+
export class MapComponent {}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
Import the Map Components CSS explicitly in your root stylesheet:
|
|
68
|
+
|
|
69
|
+
```css
|
|
70
|
+
/* styles.css */
|
|
71
|
+
@import "@arcgis/map-components/dist/components/arcgis-map/arcgis-map.css";
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### TypeScript Configuration
|
|
75
|
+
|
|
76
|
+
Set `moduleResolution` to `"node16"` or `"bundler"` in `tsconfig.json` to properly resolve `@arcgis/map-components` package exports:
|
|
77
|
+
|
|
78
|
+
```json
|
|
79
|
+
{
|
|
80
|
+
"compilerOptions": {
|
|
81
|
+
"moduleResolution": "bundler"
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
10
86
|
## Minimal Setup
|
|
11
87
|
|
|
12
88
|
### Project Structure
|
|
@@ -58,8 +58,19 @@ Use this skill when building user interfaces with widgets, Map Components, and C
|
|
|
58
58
|
| `arcgis-area-measurement-2d` | 2D area measurement |
|
|
59
59
|
| `arcgis-direct-line-measurement-3d` | 3D line measurement |
|
|
60
60
|
| `arcgis-area-measurement-3d` | 3D area measurement |
|
|
61
|
+
| `arcgis-directional-pad` | Directional pad for camera navigation |
|
|
62
|
+
| `arcgis-elevation-profile` | Elevation profile along a path |
|
|
63
|
+
| `arcgis-line-of-sight` | Line of sight analysis (3D) |
|
|
64
|
+
| `arcgis-slice` | Slice through 3D data |
|
|
65
|
+
| `arcgis-shadow-cast` | Shadow cast analysis (3D) |
|
|
66
|
+
| `arcgis-oriented-imagery-viewer` | View oriented imagery |
|
|
67
|
+
| `arcgis-video-player` | Play video feeds from video layers |
|
|
68
|
+
| `arcgis-link-chart` | Link chart visualization |
|
|
69
|
+
| `arcgis-link-chart-layout-switcher` | Switch link chart layouts |
|
|
70
|
+
| `arcgis-version-management` | Manage geodatabase versions |
|
|
61
71
|
| `arcgis-utility-network-trace` | Utility network tracing |
|
|
62
72
|
| `arcgis-utility-network-associations` | Utility associations |
|
|
73
|
+
| `arcgis-utility-network-validate-topology` | Validate utility network topology |
|
|
63
74
|
|
|
64
75
|
> **Note:** Not all widgets have component equivalents yet. Histogram and some specialized widgets only have Core API versions. FeatureForm has the `arcgis-feature-form` component.
|
|
65
76
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@saschabrunnerch/arcgis-maps-sdk-js-ai-context",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Install Agent Skills for ArcGIS Maps SDK for JavaScript development. Compatible with Claude, VS Code, Cursor, and other AI agents.",
|
|
5
5
|
"main": "lib/installer.js",
|
|
6
6
|
"bin": {
|