@saschabrunnerch/arcgis-maps-sdk-js-ai-context 0.0.2 → 0.1.0

package/contexts/4.34/copilot/arcgis-cim-symbols.instructions.md

@@ -1,177 +0,0 @@
----
-applyTo: "**/*.{js,ts,jsx,tsx,html}"
----
-
-# ArcGIS Maps SDK - CIM Symbols
-
-Advanced cartographic symbols using CIM (Cartographic Information Model).
-
-## Basic CIM Symbol
-
-```javascript
-const graphic = new Graphic({
-  geometry: point,
-  symbol: {
-    type: "cim",
-    data: {
-      type: "CIMSymbolReference",
-      symbol: {
-        type: "CIMPointSymbol",
-        symbolLayers: [{
-          type: "CIMVectorMarker",
-          enable: true,
-          size: 20,
-          frame: { xmin: 0, ymin: 0, xmax: 10, ymax: 10 },
-          markerGraphics: [{
-            type: "CIMMarkerGraphic",
-            geometry: { rings: [[[0,0], [10,0], [10,10], [0,10], [0,0]]] },
-            symbol: {
-              type: "CIMPolygonSymbol",
-              symbolLayers: [{
-                type: "CIMSolidFill",
-                enable: true,
-                color: [255, 0, 0, 255]
-              }]
-            }
-          }]
-        }]
-      }
-    }
-  }
-});
-```
-
-## CIM Line Symbol (Arrow)
-
-```javascript
-const arrowLineCIM = {
-  type: "CIMSymbolReference",
-  symbol: {
-    type: "CIMLineSymbol",
-    symbolLayers: [
-      {
-        type: "CIMVectorMarker",
-        enable: true,
-        size: 12,
-        markerPlacement: {
-          type: "CIMMarkerPlacementAtExtremities",
-          extremityPlacement: "JustEnd",
-          angleToLine: true
-        },
-        frame: { xmin: 0, ymin: 0, xmax: 10, ymax: 10 },
-        markerGraphics: [{
-          type: "CIMMarkerGraphic",
-          geometry: { rings: [[[0, 0], [10, 5], [0, 10], [3, 5], [0, 0]]] },
-          symbol: {
-            type: "CIMPolygonSymbol",
-            symbolLayers: [{ type: "CIMSolidFill", enable: true, color: [0, 0, 0, 255] }]
-          }
-        }]
-      },
-      { type: "CIMSolidStroke", enable: true, width: 2, color: [0, 0, 0, 255] }
-    ]
-  }
-};
-```
-
-## CIM Polygon Symbol (Hatched)
-
-```javascript
-const hatchedFillCIM = {
-  type: "CIMSymbolReference",
-  symbol: {
-    type: "CIMPolygonSymbol",
-    symbolLayers: [
-      {
-        type: "CIMHatchFill",
-        enable: true,
-        lineSymbol: {
-          type: "CIMLineSymbol",
-          symbolLayers: [{ type: "CIMSolidStroke", enable: true, width: 1, color: [0, 0, 0, 255] }]
-        },
-        rotation: 45,
-        separation: 5
-      },
-      { type: "CIMSolidFill", enable: true, color: [255, 255, 200, 255] },
-      { type: "CIMSolidStroke", enable: true, width: 2, color: [0, 0, 0, 255] }
-    ]
-  }
-};
-```
-
-## Data-Driven CIM
-
-```javascript
-const dataDrivenCIM = {
-  type: "CIMSymbolReference",
-  primitiveOverrides: [{
-    type: "CIMPrimitiveOverride",
-    primitiveName: "fillLayer",
-    propertyName: "Color",
-    valueExpressionInfo: {
-      type: "CIMExpressionInfo",
-      expression: `
-        var val = $feature.value;
-        if (val < 50) return [255, 0, 0, 255];
-        return [0, 255, 0, 255];
-      `,
-      returnType: "Default"
-    }
-  }],
-  symbol: {
-    type: "CIMPointSymbol",
-    symbolLayers: [{
-      type: "CIMVectorMarker",
-      markerGraphics: [{
-        type: "CIMMarkerGraphic",
-        symbol: {
-          type: "CIMPolygonSymbol",
-          symbolLayers: [{
-            type: "CIMSolidFill",
-            primitiveName: "fillLayer",
-            color: [128, 128, 128, 255]
-          }]
-        }
-      }]
-    }]
-  }
-};
-```
-
-## Marker Placement
-
-```javascript
-// Along line
-markerPlacement: {
-  type: "CIMMarkerPlacementAlongLineSameSize",
-  placementTemplate: [20],
-  angleToLine: true
-}
-
-// At vertices
-markerPlacement: {
-  type: "CIMMarkerPlacementAtRatioPositions",
-  positionArray: [0, 0.5, 1],
-  angleToLine: true
-}
-```
-
-## CIM Properties
-
-```javascript
-// Colors: [R, G, B, A] where each is 0-255
-color: [255, 0, 0, 255]
-
-// Stroke
-{ type: "CIMSolidStroke", width: 2, color: [0, 0, 0, 255], capStyle: "Round", joinStyle: "Round" }
-
-// Anchor
-{ anchorPoint: { x: 0, y: -0.5 }, anchorPointUnits: "Relative" }
-```
-
-## Common Pitfalls
-
-1. **Frame coordinates** - Frame defines coordinate space for graphics
-2. **Layer order** - Renders bottom to top
-3. **Primitive names** - Must be unique for overrides
-4. **Closed rings** - First point must equal last point

package/contexts/4.34/copilot/arcgis-core-maps.instructions.md

@@ -1,246 +0,0 @@
----
-applyTo: "**/*.{js,ts,jsx,tsx,html}"
----
-
-# ArcGIS Maps SDK - Core Maps & Views
-
-## SDK Version
-Use ArcGIS Maps SDK for JavaScript version 4.x (currently 4.34).
-
-## Import Patterns
-
-### Direct ESM Imports (Recommended for Build Tools)
-```javascript
-import Map from "@arcgis/core/Map.js";
-import MapView from "@arcgis/core/views/MapView.js";
-import SceneView from "@arcgis/core/views/SceneView.js";
-import WebMap from "@arcgis/core/WebMap.js";
-import WebScene from "@arcgis/core/WebScene.js";
-```
-
-### Dynamic Imports (CDN / No Build Tools)
-```javascript
-const Map = await $arcgis.import("@arcgis/core/Map.js");
-const MapView = await $arcgis.import("@arcgis/core/views/MapView.js");
-```
-
-## Two Approaches: Map Components vs Core API
-
-### Map Components (Modern - Recommended)
-```html
-<arcgis-map basemap="topo-vector" center="-118.24,34.05" zoom="12">
-  <arcgis-zoom slot="top-left"></arcgis-zoom>
-  <arcgis-compass slot="top-left"></arcgis-compass>
-</arcgis-map>
-
-<script type="module">
-  const mapElement = document.querySelector("arcgis-map");
-  await mapElement.viewOnReady();
-  const view = mapElement.view;
-  const map = mapElement.map;
-</script>
-```
-
-### Core API
-```javascript
-import Map from "@arcgis/core/Map.js";
-import MapView from "@arcgis/core/views/MapView.js";
-
-const map = new Map({ basemap: "topo-vector" });
-
-const view = new MapView({
-  container: "viewDiv",
-  map: map,
-  center: [-118.24, 34.05], // [longitude, latitude]
-  zoom: 12
-});
-```
-
-## CDN Setup
-
-### Map Components
-```html
-<script type="module" src="https://js.arcgis.com/calcite-components/3.3.3/calcite.esm.js"></script>
-<script src="https://js.arcgis.com/4.34/"></script>
-<script type="module" src="https://js.arcgis.com/4.34/map-components/"></script>
-```
-
-### Core API (requires CSS)
-```html
-<link rel="stylesheet" href="https://js.arcgis.com/4.34/esri/themes/light/main.css" />
-<script src="https://js.arcgis.com/4.34/"></script>
-```
-
-## 2D Maps
-
-```javascript
-const map = new Map({ basemap: "streets-vector" });
-
-const view = new MapView({
-  container: "viewDiv",
-  map: map,
-  center: [-118.24, 34.05],
-  zoom: 12,
-  constraints: {
-    minZoom: 5,
-    maxZoom: 18,
-    rotationEnabled: false
-  }
-});
-```
-
-## 3D Scenes
-
-```javascript
-import SceneView from "@arcgis/core/views/SceneView.js";
-
-const map = new Map({
-  basemap: "topo-3d",
-  ground: "world-elevation"
-});
-
-const view = new SceneView({
-  container: "viewDiv",
-  map: map,
-  camera: {
-    position: {
-      longitude: -118.24,
-      latitude: 34.05,
-      z: 25000
-    },
-    heading: 0,
-    tilt: 45
-  }
-});
-```
-
-## Loading WebMaps and WebScenes
-
-```javascript
-import WebMap from "@arcgis/core/WebMap.js";
-import WebScene from "@arcgis/core/WebScene.js";
-
-// WebMap
-const webmap = new WebMap({
-  portalItem: { id: "f2e9b762544945f390ca4ac3671cfa72" }
-});
-
-// WebScene
-const webscene = new WebScene({
-  portalItem: { id: "YOUR_WEBSCENE_ID" }
-});
-```
-
-## Navigation
-
-```javascript
-// Go to location
-await view.goTo({
-  center: [-118.24, 34.05],
-  zoom: 15
-});
-
-// Animated navigation
-await view.goTo(
-  { center: [-118.24, 34.05], zoom: 15 },
-  { duration: 2000, easing: "ease-in-out" }
-);
-
-// Go to extent or features
-await view.goTo(layer.fullExtent);
-await view.goTo(featureSet.features);
-```
-
-## View Constraints
-
-```javascript
-view.constraints = {
-  minZoom: 5,
-  maxZoom: 18,
-  geometry: layer.fullExtent,
-  rotationEnabled: false
-};
-```
-
-## Event Handling
-
-```javascript
-// View ready
-view.when(() => console.log("View is ready"));
-
-// Click event
-view.on("click", (event) => {
-  console.log("Clicked at:", event.mapPoint);
-});
-
-// Pointer move
-view.on("pointer-move", (event) => {
-  const point = view.toMap(event);
-});
-
-// Watch properties
-view.watch("extent", (extent) => console.log("Extent changed"));
-view.watch("stationary", (isStationary) => {
-  if (isStationary) console.log("Navigation complete");
-});
-```
-
-## Common Basemaps
-
-| ID | Description |
-|----|-------------|
-| `streets-vector` | Street map |
-| `topo-vector` | Topographic |
-| `satellite` | Satellite imagery |
-| `hybrid` | Satellite with labels |
-| `dark-gray-vector` | Dark gray canvas |
-| `gray-vector` | Light gray canvas |
-| `topo-3d` | 3D topographic |
-
-## reactiveUtils (Property Watching)
-
-```javascript
-import reactiveUtils from "@arcgis/core/core/reactiveUtils.js";
-
-reactiveUtils.watch(
-  () => view.scale,
-  (scale) => console.log("Scale:", scale)
-);
-
-reactiveUtils.when(
-  () => layer.loaded,
-  () => console.log("Layer loaded")
-);
-```
-
-## Autocasting vs Explicit Classes
-
-### Use Autocasting for Configuration
-```javascript
-layer.renderer = {
-  type: "simple",
-  symbol: { type: "simple-marker", color: "red" }
-};
-```
-
-### Use Explicit Classes for Instance Methods
-```javascript
-import SimpleRenderer from "@arcgis/core/renderers/SimpleRenderer.js";
-const renderer = new SimpleRenderer({ ... });
-```
-
-### TypeScript: Use `as const`
-```typescript
-layer.renderer = {
-  type: "simple",
-  symbol: { type: "simple-marker", color: "red" }
-} as const;
-```
-
-## Common Pitfalls
-
-1. **Missing CSS for Core API** - Always include main.css
-2. **Not awaiting viewOnReady()** - Wait before accessing view properties
-3. **Coordinate order** - ArcGIS uses [longitude, latitude], not [lat, lon]
-4. **Missing container height** - Ensure `#viewDiv { height: 100%; }`
-5. **Script type** - Use `type="module"` for async/await

package/contexts/4.34/copilot/arcgis-core-utilities.instructions.md

@@ -1,247 +0,0 @@
----
-applyTo: "**/*.{js,ts,jsx,tsx,html}"
----
-
-# ArcGIS Maps SDK - Core Utilities & Interaction
-
-## reactiveUtils (Property Watching)
-
-```javascript
-import reactiveUtils from "@arcgis/core/core/reactiveUtils.js";
-
-// Watch property
-const handle = reactiveUtils.watch(
-  () => view.scale,
-  (scale) => console.log("Scale:", scale)
-);
-
-// Watch with initial value
-reactiveUtils.watch(
-  () => view.extent,
-  (extent) => console.log("Extent:", extent),
-  { initial: true }
-);
-
-// Wait for condition
-await reactiveUtils.when(() => view.ready);
-
-// One-time watch
-await reactiveUtils.once(() => layer.loaded);
-
-// Watch multiple
-reactiveUtils.watch(
-  () => [view.center, view.zoom],
-  ([center, zoom]) => console.log(center, zoom)
-);
-
-// Stop watching
-handle.remove();
-```
-
-## Handles (Cleanup)
-
-```javascript
-import Handles from "@arcgis/core/core/Handles.js";
-
-const handles = new Handles();
-
-handles.add(reactiveUtils.watch(() => view.scale, () => {}));
-handles.add(view.on("click", () => {}), "click-group");
-
-// Remove group
-handles.remove("click-group");
-
-// Remove all
-handles.removeAll();
-handles.destroy();
-```
-
-## promiseUtils
-
-```javascript
-import promiseUtils from "@arcgis/core/core/promiseUtils.js";
-
-// Debounce
-const debouncedSearch = promiseUtils.debounce(async (query) => {
-  return await searchService.search(query);
-});
-
-// Throttle
-const throttledUpdate = promiseUtils.throttle(async (extent) => {
-  await updateDisplay(extent);
-}, 100);
-
-// Check abort error
-try {
-  await debouncedSearch(query);
-} catch (e) {
-  if (!promiseUtils.isAbortError(e)) throw e;
-}
-
-// Wait for all (regardless of success)
-const results = await promiseUtils.eachAlways([promise1, promise2]);
-results.forEach(r => console.log(r.error || r.value));
-```
-
-## Collection
-
-```javascript
-import Collection from "@arcgis/core/core/Collection.js";
-
-const collection = new Collection([item1, item2]);
-
-// Mutate
-collection.add(item);
-collection.addMany([item3, item4]);
-collection.remove(item);
-collection.removeAt(0);
-collection.removeAll();
-collection.reorder(item, 0);
-
-// Query
-const found = collection.find(item => item.id === 3);
-const filtered = collection.filter(item => item.active);
-const mapped = collection.map(item => item.name);
-
-// Events
-collection.on("change", (e) => {
-  console.log("Added:", e.added, "Removed:", e.removed);
-});
-```
-
-## Hit Testing
-
-```javascript
-view.on("click", async (event) => {
-  const response = await view.hitTest(event);
-  if (response.results.length > 0) {
-    const graphic = response.results[0].graphic;
-    console.log("Clicked:", graphic.attributes);
-  }
-});
-
-// Filter by layer
-const response = await view.hitTest(event, {
-  include: [featureLayer],
-  exclude: [graphicsLayer]
-});
-```
-
-## Highlighting
-
-```javascript
-const layerView = await view.whenLayerView(featureLayer);
-
-// Highlight
-const highlight = layerView.highlight(graphic);
-const highlight = layerView.highlight([graphic1, graphic2]);
-const highlight = layerView.highlight([objectId1, objectId2]);
-
-// Remove highlight
-highlight.remove();
-
-// Options
-layerView.highlightOptions = {
-  color: [255, 255, 0, 1],
-  haloOpacity: 0.9,
-  fillOpacity: 0.2
-};
-```
-
-## View Events
-
-```javascript
-// Click
-view.on("click", (event) => {
-  console.log("Map point:", event.mapPoint);
-  console.log("Screen:", event.x, event.y);
-});
-
-// Double-click
-view.on("double-click", (event) => {
-  event.stopPropagation(); // Prevent zoom
-});
-
-// Pointer move
-view.on("pointer-move", (event) => {
-  const point = view.toMap(event);
-});
-
-// Key events
-view.on("key-down", (event) => {
-  if (event.key === "Escape") { }
-});
-
-// Stationary (navigation complete)
-view.watch("stationary", (isStationary) => {
-  if (isStationary) console.log("Navigation done");
-});
-```
-
-## Coordinate Conversion
-
-```javascript
-// Screen to map
-const mapPoint = view.toMap({ x: screenX, y: screenY });
-
-// Map to screen
-const screenPoint = view.toScreen(mapPoint);
-```
-
-## Units
-
-```javascript
-import units from "@arcgis/core/core/units.js";
-
-const meters = units.convertUnit(100, "feet", "meters");
-const sqKm = units.convertUnit(1000, "acres", "square-kilometers");
-```
-
-## Scheduling
-
-```javascript
-import scheduling from "@arcgis/core/core/scheduling.js";
-
-const handle = scheduling.addFrameTask({
-  update: (event) => {
-    console.log("Delta:", event.deltaTime);
-  }
-});
-
-handle.remove();
-```
-
-## Workers (Background Processing)
-
-```javascript
-import workers from "@arcgis/core/core/workers.js";
-
-const connection = await workers.open("path/to/worker.js");
-const result = await connection.invoke("methodName", { data: "params" });
-connection.close();
-```
-
-## Accessor (Custom Classes)
-
-```javascript
-import Accessor from "@arcgis/core/core/Accessor.js";
-import { subclass, property } from "@arcgis/core/core/accessorSupport/decorators.js";
-
-@subclass("myapp.CustomClass")
-class CustomClass extends Accessor {
-  @property()
-  name = "default";
-
-  @property({ readOnly: true, dependsOn: ["name"] })
-  get displayName() {
-    return this.name.toUpperCase();
-  }
-}
-```
-
-## Common Pitfalls
-
-1. **Memory leaks** - Always remove handles when done
-2. **Initial value** - Use `{ initial: true }` for immediate callback
-3. **Abort errors** - Check with `promiseUtils.isAbortError()`
-4. **Sync vs async** - Default is async batching, `{ sync: true }` for immediate