npm - @saschabrunnerch/arcgis-maps-sdk-js-ai-context - Versions diffs - 0.0.2 → 0.1.0 - Mend

@saschabrunnerch/arcgis-maps-sdk-js-ai-context 0.0.2 → 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 (52) hide show

package/contexts/4.34/copilot/arcgis-starter-app.instructions.md DELETED Viewed

@@ -1,268 +0,0 @@
----
-applyTo: "**/*.{js,ts,jsx,tsx,html,json}"
----
-# ArcGIS Starter App with TypeScript & Vite
-Scaffold a minimal ArcGIS Maps SDK for JavaScript application.
-## Project Structure
-```
-my-arcgis-app/
-├── src/
-│   ├── main.ts
-│   └── style.css
-├── index.html
-├── package.json
-├── tsconfig.json
-├── vite.config.ts
-├── .gitignore
-└── README.md
-```
-## package.json
-```json
-{
-  "name": "my-arcgis-app",
-  "private": true,
-  "version": "0.0.1",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "devDependencies": {
-    "typescript": "~5.9.3",
-    "vite": "^7.2.7"
-  },
-  "dependencies": {
-    "@arcgis/map-components": "^4.34.9",
-    "@esri/calcite-components": "^3.3.3"
-  }
-}
-```
-## index.html (2D Map)
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <title>ArcGIS Map App</title>
-    <link rel="stylesheet" href="/src/style.css" />
-  </head>
-  <body>
-    <calcite-shell content-behind>
-      <arcgis-map item-id="YOUR_WEBMAP_ID">
-        <arcgis-zoom position="top-left"></arcgis-zoom>
-        <arcgis-legend position="bottom-left"></arcgis-legend>
-      </arcgis-map>
-    </calcite-shell>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
-```
-## index.html (3D Scene)
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <title>ArcGIS Scene App</title>
-    <link rel="stylesheet" href="/src/style.css" />
-  </head>
-  <body>
-    <calcite-shell content-behind>
-      <arcgis-scene item-id="YOUR_WEBSCENE_ID">
-        <arcgis-zoom position="top-left"></arcgis-zoom>
-        <arcgis-navigation-toggle position="top-left"></arcgis-navigation-toggle>
-        <arcgis-compass position="top-left"></arcgis-compass>
-      </arcgis-scene>
-    </calcite-shell>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
-```
-## src/main.ts (Map Components)
-```typescript
-import "@arcgis/map-components/dist/components/arcgis-map";
-import "@arcgis/map-components/dist/components/arcgis-zoom";
-import "@arcgis/map-components/dist/components/arcgis-legend";
-// For 3D scenes, also import:
-// import "@arcgis/map-components/dist/components/arcgis-scene";
-// import "@arcgis/map-components/dist/components/arcgis-navigation-toggle";
-// import "@arcgis/map-components/dist/components/arcgis-compass";
-import "@esri/calcite-components/dist/components/calcite-shell";
-import { setAssetPath as setCalciteAssetPath } from "@esri/calcite-components/dist/components";
-// Set Calcite assets path
-setCalciteAssetPath("https://js.arcgis.com/calcite-components/3.3.3/assets");
-// Configure ArcGIS API key
-import esriConfig from "@arcgis/core/config";
-esriConfig.apiKey = "YOUR_API_KEY";
-// Wait for map to be ready
-const arcgisMap = document.querySelector("arcgis-map");
-arcgisMap?.addEventListener("arcgisViewReadyChange", (event) => {
-  const { view } = (event as CustomEvent).detail;
-  console.log("Map view ready:", view);
-});
-```
-## src/main.ts (Core API - Programmatic)
-```typescript
-import "@esri/calcite-components/dist/components/calcite-shell";
-import { setAssetPath as setCalciteAssetPath } from "@esri/calcite-components/dist/components";
-import Map from "@arcgis/core/Map";
-import MapView from "@arcgis/core/views/MapView";
-// Set Calcite assets path
-setCalciteAssetPath("https://js.arcgis.com/calcite-components/3.3.3/assets");
-const map = new Map({ basemap: "topo-vector" });
-// Create view
-const view = new MapView({
-  container: "viewDiv",
-  map: map,
-  center: [-118.805, 34.027],
-  zoom: 13,
-});
-```
-## src/style.css
-```css
-@import "@arcgis/core/assets/esri/themes/light/main.css";
-html, body {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-  font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-calcite-shell { width: 100%; height: 100%; }
-arcgis-map, arcgis-scene, #viewDiv { width: 100%; height: 100%; }
-```
-## tsconfig.json
-```json
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}
-```
-## vite.config.ts
-```typescript
-import { defineConfig } from "vite";
-export default defineConfig({
-  build: { target: "esnext" }
-});
-```
-## .gitignore
-```
-node_modules/
-dist/
-.env
-.env.local
-```
-## README.md
-```markdown
-# My ArcGIS App
-A web mapping application built with ArcGIS Maps SDK for JavaScript.
-## Prerequisites
-- Node.js 18+
-- npm or pnpm
-## Setup
-1. Install dependencies:
-   npm install
-2. Start development server:
-   npm run dev
-3. Build for production:
-   npm run build
-## Configuration
-- API Key: Set your ArcGIS API key in src/main.ts
-- Web Map/Scene ID: Update the item-id in index.html
-## Technologies
-- ArcGIS Maps SDK for JavaScript
-- Calcite Design System
-- TypeScript
-- Vite
-```
-## Quick Start
-```bash
-npm install @arcgis/map-components @esri/calcite-components
-npm install -D typescript vite
-npm run dev
-```
-## Common Widgets
-```typescript
-// Import additional components as needed
-import "@arcgis/map-components/dist/components/arcgis-search";
-import "@arcgis/map-components/dist/components/arcgis-basemap-gallery";
-import "@arcgis/map-components/dist/components/arcgis-layer-list";
-```
-```html
-<arcgis-map item-id="YOUR_MAP_ID">
-  <arcgis-search position="top-right"></arcgis-search>
-  <arcgis-basemap-gallery position="top-right"></arcgis-basemap-gallery>
-</arcgis-map>
-```

package/contexts/4.34/copilot/arcgis-time-animation.instructions.md DELETED Viewed

@@ -1,112 +0,0 @@
----
-applyTo: "**/*.{js,ts,jsx,tsx,html}"
----
-# ArcGIS Maps SDK - Time & Animation
-Work with temporal data, time-aware layers, and animation controls.
-## TimeExtent
-```javascript
-import TimeExtent from "@arcgis/core/TimeExtent.js";
-const timeExtent = new TimeExtent({
-  start: new Date("2024-01-01"),
-  end: new Date("2024-12-31")
-});
-view.timeExtent = timeExtent;
-```
-## TimeSlider Component
-```html
-<arcgis-map item-id="YOUR_WEBMAP_ID">
-  <arcgis-time-slider slot="bottom-left" mode="time-window" loop></arcgis-time-slider>
-</arcgis-map>
-```
-## TimeSlider Widget (Core API)
-```javascript
-import TimeSlider from "@arcgis/core/widgets/TimeSlider.js";
-const timeSlider = new TimeSlider({
-  container: "timeSliderDiv",
-  view: view,
-  fullTimeExtent: {
-    start: new Date("2020-01-01"),
-    end: new Date("2024-12-31")
-  },
-  mode: "time-window",  // instant, time-window, cumulative-from-start, cumulative-from-end
-  playRate: 1000,
-  loop: true,
-  stops: {
-    interval: { value: 1, unit: "months" }
-  }
-});
-// Playback controls
-timeSlider.play();
-timeSlider.stop();
-// Watch for changes
-timeSlider.watch("timeExtent", (timeExtent) => {
-  console.log("Time:", timeExtent.start, timeExtent.end);
-});
-```
-## Time-Aware Layers
-```javascript
-const layer = new FeatureLayer({
-  url: "https://services.arcgis.com/.../FeatureServer/0",
-  timeInfo: {
-    startField: "event_date",
-    endField: "end_date",
-    interval: { value: 1, unit: "days" }
-  }
-});
-await layer.load();
-if (layer.timeInfo) {
-  timeSlider.fullTimeExtent = layer.timeInfo.fullTimeExtent;
-}
-```
-## Query with Time
-```javascript
-const query = layer.createQuery();
-query.timeExtent = new TimeExtent({
-  start: new Date("2024-01-01"),
-  end: new Date("2024-12-31")
-});
-const results = await layer.queryFeatures(query);
-```
-## Custom Stops
-```javascript
-// Interval-based
-stops: { interval: { value: 1, unit: "weeks" } }
-// Specific dates
-stops: { dates: [new Date("2024-01-01"), new Date("2024-04-01")] }
-// Even count
-stops: { count: 12 }
-```
-## TimeInterval Units
-`milliseconds`, `seconds`, `minutes`, `hours`, `days`, `weeks`, `months`, `years`
-## Common Pitfalls
-1. **Time zone issues** - Use UTC for consistency
-2. **Layer must be loaded** - TimeInfo available after load()
-3. **Null for all data** - Set `view.timeExtent = null` to show all
-4. **Performance** - Large time ranges can be slow

package/contexts/4.34/copilot/arcgis-visualization.instructions.md DELETED Viewed

@@ -1,321 +0,0 @@
----
-applyTo: "**/*.{js,ts,jsx,tsx,html}"
----
-# ArcGIS Maps SDK - Visualization (Renderers & Symbols)
-## Renderer Types
-| Renderer | Use Case |
-|----------|----------|
-| SimpleRenderer | Same symbol for all features |
-| UniqueValueRenderer | Different symbols by category |
-| ClassBreaksRenderer | Different symbols by numeric ranges |
-| HeatmapRenderer | Density visualization |
-| DotDensityRenderer | Dot density maps |
-## SimpleRenderer
-```javascript
-layer.renderer = {
-  type: "simple",
-  symbol: {
-    type: "simple-marker",
-    color: "blue",
-    size: 8,
-    outline: { color: "white", width: 1 }
-  }
-};
-```
-### With Visual Variables
-```javascript
-layer.renderer = {
-  type: "simple",
-  symbol: { type: "simple-marker", color: "#13EB0C" },
-  visualVariables: [{
-    type: "size",
-    field: "population",
-    stops: [
-      { value: 1000, size: 4 },
-      { value: 100000, size: 24 }
-    ]
-  }]
-};
-```
-## UniqueValueRenderer
-```javascript
-layer.renderer = {
-  type: "unique-value",
-  field: "type",
-  defaultSymbol: { type: "simple-fill", color: "gray" },
-  uniqueValueInfos: [
-    {
-      value: "residential",
-      symbol: { type: "simple-fill", color: "#FFFF00" },
-      label: "Residential"
-    },
-    {
-      value: "commercial",
-      symbol: { type: "simple-fill", color: "#FF0000" },
-      label: "Commercial"
-    }
-  ]
-};
-```
-## ClassBreaksRenderer
-```javascript
-layer.renderer = {
-  type: "class-breaks",
-  field: "population",
-  classBreakInfos: [
-    { minValue: 0, maxValue: 100, symbol: { type: "simple-fill", color: "#fffcd4" }, label: "< 100" },
-    { minValue: 100, maxValue: 500, symbol: { type: "simple-fill", color: "#b1cdc2" }, label: "100 - 500" },
-    { minValue: 500, maxValue: Infinity, symbol: { type: "simple-fill", color: "#0d2644" }, label: "> 500" }
-  ]
-};
-```
-## HeatmapRenderer
-```javascript
-layer.renderer = {
-  type: "heatmap",
-  colorStops: [
-    { color: "rgba(63, 40, 102, 0)", ratio: 0 },
-    { color: "#472b77", ratio: 0.25 },
-    { color: "#ffff00", ratio: 1 }
-  ],
-  radius: 18,
-  maxDensity: 0.01
-};
-```
-## 2D Symbol Types
-### SimpleMarkerSymbol (Points)
-```javascript
-const symbol = {
-  type: "simple-marker",
-  style: "circle", // circle, square, cross, x, diamond, triangle
-  color: [255, 0, 0],
-  size: 12,
-  outline: { color: [255, 255, 255], width: 2 }
-};
-```
-### SimpleLineSymbol
-```javascript
-const symbol = {
-  type: "simple-line",
-  style: "solid", // solid, dash, dot, dash-dot
-  color: [0, 0, 255],
-  width: 2,
-  cap: "round",
-  join: "round"
-};
-```
-### SimpleFillSymbol
-```javascript
-const symbol = {
-  type: "simple-fill",
-  style: "solid",
-  color: [255, 255, 0, 0.5],
-  outline: { type: "simple-line", color: [0, 0, 0], width: 1 }
-};
-```
-### PictureMarkerSymbol
-```javascript
-const symbol = {
-  type: "picture-marker",
-  url: "https://example.com/icon.png",
-  width: 24,
-  height: 24
-};
-```
-### TextSymbol
-```javascript
-const symbol = {
-  type: "text",
-  text: "Label",
-  color: "white",
-  font: { family: "Arial", size: 12, weight: "bold" },
-  haloColor: "black",
-  haloSize: 1
-};
-```
-## 3D Symbol Types
-### PointSymbol3D
-```javascript
-const symbol = {
-  type: "point-3d",
-  symbolLayers: [{
-    type: "icon",
-    resource: { primitive: "circle" },
-    material: { color: "red" },
-    size: 12
-  }]
-};
-// Object marker
-const symbol = {
-  type: "point-3d",
-  symbolLayers: [{
-    type: "object",
-    resource: { primitive: "cylinder" },
-    material: { color: "blue" },
-    height: 100,
-    width: 10
-  }]
-};
-```
-### PolygonSymbol3D (Extrusion)
-```javascript
-const symbol = {
-  type: "polygon-3d",
-  symbolLayers: [{
-    type: "extrude",
-    material: { color: "blue" },
-    size: 100
-  }]
-};
-```
-## Visual Variables
-### Size Variable
-```javascript
-visualVariables: [{
-  type: "size",
-  field: "magnitude",
-  stops: [
-    { value: 1, size: 4 },
-    { value: 10, size: 40 }
-  ]
-}]
-```
-### Color Variable
-```javascript
-visualVariables: [{
-  type: "color",
-  field: "temperature",
-  stops: [
-    { value: 0, color: "blue" },
-    { value: 100, color: "red" }
-  ]
-}]
-```
-### Opacity Variable
-```javascript
-visualVariables: [{
-  type: "opacity",
-  field: "confidence",
-  stops: [
-    { value: 0, opacity: 0.1 },
-    { value: 100, opacity: 1 }
-  ]
-}]
-```
-### Rotation Variable
-```javascript
-visualVariables: [{
-  type: "rotation",
-  field: "heading",
-  rotationType: "geographic"
-}]
-```
-## Labeling
-```javascript
-layer.labelingInfo = [{
-  symbol: {
-    type: "text",
-    color: "white",
-    font: { family: "Noto Sans", size: 10, weight: "bold" },
-    haloColor: "#472b77",
-    haloSize: 1
-  },
-  labelPlacement: "above-center",
-  labelExpressionInfo: {
-    expression: "$feature.name"
-  },
-  where: "population > 10000",
-  minScale: 500000
-}];
-layer.labelsVisible = true;
-```
-### Label Placements
-- Points: `above-center`, `below-center`, `center-center`
-- Lines: `above-along`, `below-along`, `center-along`
-- Polygons: `always-horizontal`
-## Effects and Blend Modes
-```javascript
-// Layer effects
-layer.effect = "drop-shadow(2px 2px 3px gray)";
-layer.effect = "blur(2px)";
-layer.effect = "grayscale(100%)";
-layer.effect = "brightness(150%) contrast(120%)";
-// Blend modes
-layer.blendMode = "multiply";
-```
-## Feature Effects
-```javascript
-import FeatureEffect from "@arcgis/core/layers/support/FeatureEffect.js";
-layerView.featureEffect = new FeatureEffect({
-  filter: { where: "population > 100000" },
-  includedEffect: "bloom(1, 0.5px, 0.2)",
-  excludedEffect: "grayscale(100%) opacity(30%)"
-});
-```
-## Smart Mapping (Auto-generated Renderers)
-```javascript
-import colorRendererCreator from "@arcgis/core/smartMapping/renderers/color.js";
-const response = await colorRendererCreator.createContinuousRenderer({
-  layer: layer,
-  field: "population",
-  view: view,
-  theme: "high-to-low"
-});
-layer.renderer = response.renderer;
-```
-## TypeScript: Use `as const`
-```typescript
-layer.renderer = {
-  type: "simple",
-  symbol: { type: "simple-marker", color: "red", size: 8 }
-} as const;
-```
-## Common Pitfalls
-1. **Missing type property** - Always include `type` for autocasting
-2. **Color formats** - Use hex, named, RGB array, or RGBA array
-3. **Visual variables require numeric fields** - Field must contain numbers
-4. **Label expressions are Arcade** - Use Arcade syntax, not JavaScript