@saschabrunnerch/arcgis-maps-sdk-js-ai-context 0.0.1 → 0.0.2
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 +4 -2
- package/contexts/4.34/claude/arcgis-starter-app/SKILL.md +273 -0
- package/contexts/4.34/claude/arcgis-starter-app-extended/SKILL.md +649 -0
- package/contexts/4.34/copilot/arcgis-starter-app-extended.instructions.md +643 -0
- package/contexts/4.34/copilot/arcgis-starter-app.instructions.md +268 -0
- package/lib/installer.js +379 -379
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -88,10 +88,11 @@ Available versions can be viewed with the `list` command. If no version is speci
|
|
|
88
88
|
|
|
89
89
|
## Claude Skills Included
|
|
90
90
|
|
|
91
|
-
The package includes
|
|
91
|
+
The package includes 29 comprehensive Claude skills covering:
|
|
92
92
|
|
|
93
93
|
| Skill | Description |
|
|
94
94
|
|-------|-------------|
|
|
95
|
+
| arcgis-starter-app | Scaffold minimal TypeScript/Vite app with Map Components |
|
|
95
96
|
| arcgis-core-maps | 2D and 3D map creation, views, navigation |
|
|
96
97
|
| arcgis-layers | FeatureLayer, TileLayer, GeoJSONLayer, and more |
|
|
97
98
|
| arcgis-visualization | Renderers, symbols, and visual variables |
|
|
@@ -123,10 +124,11 @@ The package includes 28 comprehensive Claude skills covering:
|
|
|
123
124
|
|
|
124
125
|
## GitHub Copilot Instructions
|
|
125
126
|
|
|
126
|
-
The package includes
|
|
127
|
+
The package includes 17 comprehensive Copilot instruction files covering all topics:
|
|
127
128
|
|
|
128
129
|
| File | Coverage |
|
|
129
130
|
|------|----------|
|
|
131
|
+
| arcgis-starter-app.instructions.md | Scaffold TypeScript/Vite app with Map Components |
|
|
130
132
|
| arcgis-core-maps.instructions.md | Maps, views, navigation, imports |
|
|
131
133
|
| arcgis-layers.instructions.md | All layer types, queries, management |
|
|
132
134
|
| arcgis-visualization.instructions.md | Renderers, symbols, visual variables, labels |
|
|
@@ -0,0 +1,273 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: arcgis-starter-app
|
|
3
|
+
description: Scaffold a minimal ArcGIS Maps SDK application with TypeScript, Vite, and Calcite Design System. Use when creating new projects from scratch.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# ArcGIS Starter App with TypeScript & Vite
|
|
7
|
+
|
|
8
|
+
Use this skill to create a minimal ArcGIS Maps SDK for JavaScript application with TypeScript and Vite.
|
|
9
|
+
|
|
10
|
+
## Project Structure
|
|
11
|
+
|
|
12
|
+
```
|
|
13
|
+
my-arcgis-app/
|
|
14
|
+
├── src/
|
|
15
|
+
│ ├── main.ts
|
|
16
|
+
│ └── style.css
|
|
17
|
+
├── index.html
|
|
18
|
+
├── package.json
|
|
19
|
+
├── tsconfig.json
|
|
20
|
+
├── vite.config.ts
|
|
21
|
+
├── .gitignore
|
|
22
|
+
└── README.md
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## package.json
|
|
26
|
+
|
|
27
|
+
```json
|
|
28
|
+
{
|
|
29
|
+
"name": "my-arcgis-app",
|
|
30
|
+
"private": true,
|
|
31
|
+
"version": "0.0.1",
|
|
32
|
+
"type": "module",
|
|
33
|
+
"scripts": {
|
|
34
|
+
"dev": "vite",
|
|
35
|
+
"build": "tsc && vite build",
|
|
36
|
+
"preview": "vite preview"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"typescript": "~5.9.3",
|
|
40
|
+
"vite": "^7.2.7"
|
|
41
|
+
},
|
|
42
|
+
"dependencies": {
|
|
43
|
+
"@arcgis/map-components": "^4.34.9",
|
|
44
|
+
"@esri/calcite-components": "^3.3.3"
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## index.html (2D Map)
|
|
50
|
+
|
|
51
|
+
```html
|
|
52
|
+
<!DOCTYPE html>
|
|
53
|
+
<html lang="en">
|
|
54
|
+
<head>
|
|
55
|
+
<meta charset="UTF-8" />
|
|
56
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
57
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
58
|
+
<title>ArcGIS Map App</title>
|
|
59
|
+
<link rel="stylesheet" href="/src/style.css" />
|
|
60
|
+
</head>
|
|
61
|
+
<body>
|
|
62
|
+
<calcite-shell content-behind>
|
|
63
|
+
<arcgis-map item-id="YOUR_WEBMAP_ID">
|
|
64
|
+
<arcgis-zoom position="top-left"></arcgis-zoom>
|
|
65
|
+
<arcgis-legend position="bottom-left"></arcgis-legend>
|
|
66
|
+
</arcgis-map>
|
|
67
|
+
</calcite-shell>
|
|
68
|
+
<script type="module" src="/src/main.ts"></script>
|
|
69
|
+
</body>
|
|
70
|
+
</html>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## index.html (3D Scene)
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<!DOCTYPE html>
|
|
77
|
+
<html lang="en">
|
|
78
|
+
<head>
|
|
79
|
+
<meta charset="UTF-8" />
|
|
80
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
81
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
82
|
+
<title>ArcGIS Scene App</title>
|
|
83
|
+
<link rel="stylesheet" href="/src/style.css" />
|
|
84
|
+
</head>
|
|
85
|
+
<body>
|
|
86
|
+
<calcite-shell content-behind>
|
|
87
|
+
<arcgis-scene item-id="YOUR_WEBSCENE_ID">
|
|
88
|
+
<arcgis-zoom position="top-left"></arcgis-zoom>
|
|
89
|
+
<arcgis-navigation-toggle position="top-left"></arcgis-navigation-toggle>
|
|
90
|
+
<arcgis-compass position="top-left"></arcgis-compass>
|
|
91
|
+
</arcgis-scene>
|
|
92
|
+
</calcite-shell>
|
|
93
|
+
<script type="module" src="/src/main.ts"></script>
|
|
94
|
+
</body>
|
|
95
|
+
</html>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## src/main.ts (Map Components)
|
|
99
|
+
|
|
100
|
+
```typescript
|
|
101
|
+
import "@arcgis/map-components/dist/components/arcgis-map";
|
|
102
|
+
import "@arcgis/map-components/dist/components/arcgis-zoom";
|
|
103
|
+
import "@arcgis/map-components/dist/components/arcgis-legend";
|
|
104
|
+
// For 3D scenes, also import:
|
|
105
|
+
// import "@arcgis/map-components/dist/components/arcgis-scene";
|
|
106
|
+
// import "@arcgis/map-components/dist/components/arcgis-navigation-toggle";
|
|
107
|
+
// import "@arcgis/map-components/dist/components/arcgis-compass";
|
|
108
|
+
|
|
109
|
+
import "@esri/calcite-components/dist/components/calcite-shell";
|
|
110
|
+
|
|
111
|
+
import { setAssetPath as setCalciteAssetPath } from "@esri/calcite-components/dist/components";
|
|
112
|
+
|
|
113
|
+
// Set Calcite assets path
|
|
114
|
+
setCalciteAssetPath("https://js.arcgis.com/calcite-components/3.3.3/assets");
|
|
115
|
+
|
|
116
|
+
// Configure ArcGIS API key
|
|
117
|
+
import esriConfig from "@arcgis/core/config";
|
|
118
|
+
esriConfig.apiKey = "YOUR_API_KEY";
|
|
119
|
+
|
|
120
|
+
// Wait for map to be ready
|
|
121
|
+
const arcgisMap = document.querySelector("arcgis-map");
|
|
122
|
+
arcgisMap?.addEventListener("arcgisViewReadyChange", (event) => {
|
|
123
|
+
const { view } = (event as CustomEvent).detail;
|
|
124
|
+
console.log("Map view ready:", view);
|
|
125
|
+
});
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
## src/main.ts (Core API - Programmatic)
|
|
129
|
+
|
|
130
|
+
```typescript
|
|
131
|
+
import "@esri/calcite-components/dist/components/calcite-shell";
|
|
132
|
+
import { setAssetPath as setCalciteAssetPath } from "@esri/calcite-components/dist/components";
|
|
133
|
+
|
|
134
|
+
import Map from "@arcgis/core/Map";
|
|
135
|
+
import MapView from "@arcgis/core/views/MapView";
|
|
136
|
+
|
|
137
|
+
// Set Calcite assets path
|
|
138
|
+
setCalciteAssetPath("https://js.arcgis.com/calcite-components/3.3.3/assets");
|
|
139
|
+
|
|
140
|
+
const map = new Map({ basemap: "topo-vector" });
|
|
141
|
+
|
|
142
|
+
// Create view
|
|
143
|
+
const view = new MapView({
|
|
144
|
+
container: "viewDiv",
|
|
145
|
+
map: map,
|
|
146
|
+
center: [-118.805, 34.027],
|
|
147
|
+
zoom: 13,
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
## src/style.css
|
|
154
|
+
|
|
155
|
+
```css
|
|
156
|
+
@import "@arcgis/core/assets/esri/themes/light/main.css";
|
|
157
|
+
|
|
158
|
+
html, body {
|
|
159
|
+
margin: 0;
|
|
160
|
+
padding: 0;
|
|
161
|
+
width: 100%;
|
|
162
|
+
height: 100%;
|
|
163
|
+
font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
calcite-shell { width: 100%; height: 100%; }
|
|
167
|
+
arcgis-map, arcgis-scene, #viewDiv { width: 100%; height: 100%; }
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
## tsconfig.json
|
|
171
|
+
|
|
172
|
+
```json
|
|
173
|
+
{
|
|
174
|
+
"compilerOptions": {
|
|
175
|
+
"target": "ES2020",
|
|
176
|
+
"useDefineForClassFields": true,
|
|
177
|
+
"module": "ESNext",
|
|
178
|
+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
179
|
+
"skipLibCheck": true,
|
|
180
|
+
"moduleResolution": "bundler",
|
|
181
|
+
"allowImportingTsExtensions": true,
|
|
182
|
+
"isolatedModules": true,
|
|
183
|
+
"moduleDetection": "force",
|
|
184
|
+
"noEmit": true,
|
|
185
|
+
"strict": true,
|
|
186
|
+
"noUnusedLocals": true,
|
|
187
|
+
"noUnusedParameters": true,
|
|
188
|
+
"noFallthroughCasesInSwitch": true,
|
|
189
|
+
"noUncheckedSideEffectImports": true
|
|
190
|
+
},
|
|
191
|
+
"include": ["src"]
|
|
192
|
+
}
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
## vite.config.ts
|
|
196
|
+
|
|
197
|
+
```typescript
|
|
198
|
+
import { defineConfig } from "vite";
|
|
199
|
+
|
|
200
|
+
export default defineConfig({
|
|
201
|
+
build: { target: "esnext" }
|
|
202
|
+
});
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
## .gitignore
|
|
206
|
+
|
|
207
|
+
```
|
|
208
|
+
node_modules/
|
|
209
|
+
dist/
|
|
210
|
+
.env
|
|
211
|
+
.env.local
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
## README.md
|
|
215
|
+
|
|
216
|
+
```markdown
|
|
217
|
+
# My ArcGIS App
|
|
218
|
+
|
|
219
|
+
A web mapping application built with ArcGIS Maps SDK for JavaScript.
|
|
220
|
+
|
|
221
|
+
## Prerequisites
|
|
222
|
+
|
|
223
|
+
- Node.js 18+
|
|
224
|
+
- npm or pnpm
|
|
225
|
+
|
|
226
|
+
## Setup
|
|
227
|
+
|
|
228
|
+
1. Install dependencies:
|
|
229
|
+
npm install
|
|
230
|
+
|
|
231
|
+
2. Start development server:
|
|
232
|
+
npm run dev
|
|
233
|
+
|
|
234
|
+
3. Build for production:
|
|
235
|
+
npm run build
|
|
236
|
+
|
|
237
|
+
## Configuration
|
|
238
|
+
|
|
239
|
+
- API Key: Set your ArcGIS API key in src/main.ts
|
|
240
|
+
- Web Map/Scene ID: Update the item-id in index.html
|
|
241
|
+
|
|
242
|
+
## Technologies
|
|
243
|
+
|
|
244
|
+
- ArcGIS Maps SDK for JavaScript
|
|
245
|
+
- Calcite Design System
|
|
246
|
+
- TypeScript
|
|
247
|
+
- Vite
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
## Quick Start
|
|
251
|
+
|
|
252
|
+
```bash
|
|
253
|
+
npm install @arcgis/map-components @esri/calcite-components
|
|
254
|
+
npm install -D typescript vite
|
|
255
|
+
npm run dev
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
## Common Widgets
|
|
259
|
+
|
|
260
|
+
```typescript
|
|
261
|
+
// Import additional components as needed
|
|
262
|
+
import "@arcgis/map-components/dist/components/arcgis-search";
|
|
263
|
+
import "@arcgis/map-components/dist/components/arcgis-basemap-gallery";
|
|
264
|
+
import "@arcgis/map-components/dist/components/arcgis-layer-list";
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
```html
|
|
268
|
+
<arcgis-map item-id="YOUR_MAP_ID">
|
|
269
|
+
<arcgis-search position="top-right"></arcgis-search>
|
|
270
|
+
<arcgis-basemap-gallery position="top-right"></arcgis-basemap-gallery>
|
|
271
|
+
</arcgis-map>
|
|
272
|
+
```
|
|
273
|
+
|