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

package/README.md

@@ -40,11 +40,13 @@ This creates the following structure (all skills are prefixed with `arcgis-` to
 your-project/
 └── .github/
     └── skills/
+        ├── arcgis-starter-app/
+        │   └── SKILL.md
         ├── arcgis-core-maps/
         │   └── SKILL.md
         ├── arcgis-layers/
         │   └── SKILL.md
-        ├── arcgis-visualization/
+        ├── arcgis-widgets-ui/
         │   └── SKILL.md
         └── ... (30 skill directories total)
 ```
@@ -83,45 +85,47 @@ The package includes 30 comprehensive Agent Skills covering:
 
 | Skill | Description |
 |-------|-------------|
-| arcgis-starter-app | Scaffold minimal TypeScript/Vite app with Map Components |
-| arcgis-starter-app-extended | Extended starter app with additional features |
-| arcgis-core-maps | 2D and 3D map creation, views, navigation |
+| arcgis-starter-app | Scaffold TypeScript/Vite apps (minimal and production-ready setups) |
+| arcgis-core-maps | 2D and 3D map creation, views, navigation, arcgis-video |
 | arcgis-layers | FeatureLayer, TileLayer, GeoJSONLayer, and more |
-| arcgis-visualization | Renderers, symbols, and visual variables |
+| arcgis-advanced-layers | WMS, WFS, WMTS, OGC, MapImageLayer, CatalogLayer, MediaLayer |
+| arcgis-visualization | Renderers, symbols, labels, and visual variables |
+| arcgis-smart-mapping | Smart mapping and data-driven visualization |
 | arcgis-popup-templates | Popup configuration and content |
 | arcgis-widgets-ui | Built-in widgets and UI components |
-| arcgis-geometry-operations | Geometry engine and spatial operations |
+| arcgis-widgets-advanced | BuildingExplorer, FloorFilter, Track, Locate, ScaleBar, and more |
+| arcgis-geometry-operations | Geometry operators and spatial operations |
 | arcgis-coordinates-projection | Coordinate systems and projections |
-| arcgis-authentication | OAuth, API keys, and identity management |
-| arcgis-portal-content | Portal items, groups, and content management |
-| arcgis-smart-mapping | Smart mapping and data-driven visualization |
-| arcgis-editing-advanced | Feature editing and sketching |
-| arcgis-analysis-services | Spatial analysis and geoprocessing |
-| arcgis-3d-advanced | 3D visualization and SceneView |
-| arcgis-scene-effects | 3D effects, lighting, and atmosphere |
+| arcgis-spatial-analysis | Spatial analysis, feature reduction, and analysis objects |
+| arcgis-rest-services | REST service wrappers for routing, geocoding, printing, places |
+| arcgis-3d-layers | VoxelLayer, PointCloudLayer, glTF imports, 3D analysis components |
+| arcgis-scene-environment | SceneView environment, shadows, lighting, atmosphere |
+| arcgis-feature-effects | Feature effects, filters, and blend modes |
 | arcgis-cim-symbols | CIM symbol specification |
 | arcgis-arcade | Arcade expressions |
 | arcgis-time-animation | Time-aware layers and animation |
-| arcgis-feature-effects | Feature effects and filters |
-| arcgis-custom-rendering | Custom WebGL rendering |
-| arcgis-interaction | View interaction and events |
-| arcgis-map-tools | Measurement, print, and utility tools |
+| arcgis-editing | Editor widget, forms, subtypes, versioning |
+| arcgis-interaction | Hit testing, highlighting, sketching, and events |
+| arcgis-map-tools | Measurement, print, directions, and utility tools |
 | arcgis-tables-forms | Attribute tables and feature forms |
-| arcgis-media-layers | Media and image layers |
-| arcgis-advanced-layers | Specialized layer types |
+| arcgis-custom-rendering | Custom WebGL rendering and LayerView architecture |
 | arcgis-imagery | Imagery and raster analysis |
-| arcgis-knowledge-graphs | Knowledge graph integration |
+| arcgis-authentication | OAuth, API keys, and identity management |
+| arcgis-portal-content | Portal items, groups, and content management |
+| arcgis-knowledge-graphs | Knowledge graph integration and link charts |
 | arcgis-utility-networks | Utility network analysis |
-| arcgis-core-utilities | Core utilities and helpers |
+| arcgis-core-utilities | Accessor, Collection, reactiveUtils, intl, and workers |
 
 ## Usage
 
 After installing skills, your AI agent will automatically have access to ArcGIS-specific knowledge when working in your project. The skills provide:
 
-- Correct import patterns for ESM and CDN usage
+- Correct import patterns for ESM and Map Components
 - Best practices for TypeScript with autocasting
 - Code examples for common tasks
-- API reference guidance
+- Reference samples linking to official SDK sample code
+- Common pitfalls and how to avoid them
+- Cross-references between related skills
 
 ### Supported AI Agents
 
@@ -140,7 +144,7 @@ After installing skills, your AI agent will automatically have access to ArcGIS-
 The skills in this package are based on the official ArcGIS Maps SDK for JavaScript documentation:
 
 - **Documentation:** https://developers.arcgis.com/javascript/latest/downloads/
-- **Folders used:** `api-reference` and `sample-code`
+- **Folders used:** `api-reference` and `sample-code` and `map-components`
 
 ## AI Assistance Declaration
 

package/contexts/4.34/skills/{arcgis-3d-advanced → arcgis-3d-layers}/SKILL.md

@@ -1,11 +1,11 @@
 ---
-name: arcgis-3d-advanced
-description: Advanced 3D features including VoxelLayer, PointCloudLayer, weather effects, daylight simulation, glTF model imports, and custom WebGL rendering. Use for volumetric data, LiDAR visualization, and immersive 3D experiences.
+name: arcgis-3d-layers
+description: 3D layer types including VoxelLayer, PointCloudLayer, IntegratedMeshLayer, glTF model imports, and 3D analysis components. Use for volumetric data, LiDAR visualization, and immersive 3D experiences.
 ---
 
-# ArcGIS 3D Advanced
+# ArcGIS 3D Layers
 
-Use this skill for advanced 3D visualization including voxel layers, point clouds, weather, daylight, glTF imports, and custom rendering.
+Use this skill for 3D layer types including voxel layers, point clouds, glTF imports, and 3D analysis components.
 
 ## VoxelLayer (Volumetric 3D Data)
 
@@ -41,7 +41,7 @@ map.add(voxelLayer);
   const viewElement = document.querySelector("arcgis-scene");
   viewElement.map = new Map({
     layers: [vxlLayer],
-    ground: { navigationConstraint: "none" }
+    ground: { navigationConstraint: { type: "none" } }
   });
 </script>
 ```
@@ -54,16 +54,14 @@ const voxelLayer = new VoxelLayer({
   currentVariableId: 0,
   // Slicing
   enableDynamicSections: true,
-  // Rendering style
-  renderStyle: "volume", // or "surfaces"
-  // Quality settings
-  qualityFactor: 1.0
+  // Rendering mode
+  renderMode: "volume" // or "surfaces"
 });
 
 // Access voxel-specific properties after load
 await voxelLayer.load();
 console.log("Variables:", voxelLayer.variables);
-console.log("Dimensions:", voxelLayer.dimensions);
+console.log("Volumes:", voxelLayer.volumes);
 ```
 
 ### Voxel Slicing
@@ -165,7 +163,7 @@ const elevResponse = await colorRendererCreator.createPCContinuousRenderer({
 ```javascript
 pcLayer.filters = [{
   field: "CLASS_CODE",
-  operator: "includes",
+  mode: "include",
   values: [2, 6] // Ground and Building only
 }];
 
@@ -173,127 +171,7 @@ pcLayer.filters = [{
 pcLayer.filters = [];
 ```
 
-## Weather Effects
-
-### Weather Types
-```javascript
-// Sunny (default)
-view.environment.weather = {
-  type: "sunny",
-  cloudCover: 0.2
-};
-
-// Cloudy
-view.environment.weather = {
-  type: "cloudy",
-  cloudCover: 0.6
-};
-
-// Rainy
-view.environment.weather = {
-  type: "rainy",
-  cloudCover: 0.8,
-  precipitation: 0.5 // 0-1
-};
-
-// Foggy
-view.environment.weather = {
-  type: "foggy",
-  fogStrength: 0.5 // 0-1
-};
-
-// Snowy
-view.environment.weather = {
-  type: "snowy",
-  cloudCover: 0.8,
-  precipitation: 0.5,
-  snowCover: "enabled" // or "disabled"
-};
-```
-
-### Weather Component
-```html
-<arcgis-scene item-id="...">
-  <arcgis-expand slot="top-right" expanded>
-    <arcgis-weather></arcgis-weather>
-  </arcgis-expand>
-</arcgis-scene>
-```
-
-### Weather Widget (Core API) - Deprecated
-
-> **DEPRECATED since 4.33:** Use the `arcgis-weather` component shown above instead. For information on widget deprecation, see [Esri's move to web components](https://developers.arcgis.com/javascript/latest/components-transition-plan/).
-
-```javascript
-// DEPRECATED - Use arcgis-weather component instead
-import Weather from "@arcgis/core/widgets/Weather.js";
-
-const weatherWidget = new Weather({
-  view: view
-});
-
-view.ui.add(weatherWidget, "top-right");
-```
-
-## Daylight & Lighting
-
-### Setting Date/Time
-```javascript
-// Set lighting date and time
-view.environment.lighting = {
-  date: new Date("2024-06-21T12:00:00"),
-  directShadowsEnabled: true,
-  ambientOcclusionEnabled: true
-};
-
-// Update time dynamically
-function setTime(hours) {
-  const date = new Date(view.environment.lighting.date);
-  date.setHours(hours);
-  view.environment.lighting.date = date;
-}
-```
-
-### Daylight Component
-```html
-<arcgis-scene item-id="...">
-  <arcgis-expand slot="top-right" expanded>
-    <arcgis-daylight hide-timezone play-speed-multiplier="2"></arcgis-daylight>
-  </arcgis-expand>
-</arcgis-scene>
-
-<script type="module">
-  const daylight = document.querySelector("arcgis-daylight");
-
-  // Toggle sun position vs virtual lighting
-  daylight.sunlightingDisabled = false; // Use sun position
-  daylight.sunlightingDisabled = true;  // Use virtual light
-</script>
-```
-
-### Daylight Widget (Core API)
-```javascript
-import Daylight from "@arcgis/core/widgets/Daylight.js";
-
-const daylightWidget = new Daylight({
-  view: view,
-  playSpeedMultiplier: 2 // Animation speed
-});
-
-view.ui.add(daylightWidget, "top-right");
-```
-
-### Shadow Analysis
-```javascript
-// Enable shadows
-view.environment.lighting.directShadowsEnabled = true;
-
-// Shadow cast analysis
-import ShadowCastAnalysis from "@arcgis/core/analysis/ShadowCastAnalysis.js";
-
-const shadowAnalysis = new ShadowCastAnalysis();
-view.analyses.add(shadowAnalysis);
-```
+> For scene environment settings (atmosphere, lighting, weather, shadows), see [arcgis-scene-environment](../arcgis-scene-environment/SKILL.md).
 
 ## Importing 3D Models (glTF)
 
@@ -479,7 +357,7 @@ map.ground = {
 };
 
 // Underground navigation
-map.ground.navigationConstraint = "none"; // Allow underground
+map.ground.navigationConstraint = { type: "none" }; // Allow underground
 map.ground.opacity = 0.5; // Semi-transparent ground
 ```
 
@@ -510,23 +388,22 @@ view.environment.background = {
 
 ## Scene Performance
 
-### Memory Management
+### Performance Monitoring
 ```javascript
-// Monitor memory usage
-view.watch("memoryUsage", (memoryUsage) => {
-  console.log("Memory:", memoryUsage.total, "bytes");
-});
+import * as reactiveUtils from "@arcgis/core/core/reactiveUtils.js";
+
+// Monitor performance
+reactiveUtils.watch(
+  () => view.performanceInfo,
+  (info) => {
+    console.log("Quality:", info.quality);
+  }
+);
 
 // Reduce quality for performance
 view.qualityProfile = "low";
 ```
 
-### Level of Detail
-```javascript
-// For SceneLayer
-sceneLayer.lodFactor = 1.0; // 0.5 = lower detail, 2.0 = higher detail
-```
-
 ## Viewing Modes
 
 ```javascript
@@ -572,6 +449,25 @@ view.environment.weather = {
 
 > **Tip:** See [arcgis-core-maps skill](../arcgis-core-maps/SKILL.md) for detailed guidance on autocasting vs explicit classes.
 
+### 3D Analysis Components
+
+| Component | Purpose |
+|-----------|---------|
+| `arcgis-building-explorer` | Explore building scene layers by discipline and floor |
+| `arcgis-elevation-profile` | Generate elevation profiles along a path |
+| `arcgis-line-of-sight` | Analyze line-of-sight visibility |
+| `arcgis-shadow-cast` | Simulate shadow casting at different times |
+| `arcgis-slice` | Slice through 3D content to reveal interior |
+| `arcgis-directional-pad` | Navigate 3D scenes with directional controls |
+
+## Reference Samples
+
+- `layers-voxel` - Working with VoxelLayer in 3D
+- `weather` - Weather effects in SceneView
+- `daylight` - Daylight widget for sun position
+- `import-gltf` - Importing glTF 3D models
+- `layers-dimension` - DimensionLayer for 3D measurements
+
 ## Common Pitfalls
 
 1. **VoxelLayer requires local viewing mode**: Use `viewing-mode="local"` for best results
@@ -582,5 +478,5 @@ view.environment.weather = {
 
 4. **glTF model scale**: Models may need scaling to fit the scene properly
 
-5. **Ground navigation constraint**: Set `navigationConstraint: "none"` to allow underground viewing
+5. **Ground navigation constraint**: Set `navigationConstraint: { type: "none" }` to allow underground viewing
 

package/contexts/4.34/skills/arcgis-advanced-layers/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: arcgis-advanced-layers
-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.
+description: Work with advanced layer types including WMS, WFS, WMTS, OGCFeatureLayer, MapImageLayer, CatalogLayer, MediaLayer, and dynamic data layers. Use for OGC services, server-side rendering, and georeferenced media content.
 ---
 
 # ArcGIS Advanced Layers
 
-Use this skill for working with OGC services, MapImageLayer, CatalogLayer, and dynamic data layers.
+Use this skill for working with OGC services, MapImageLayer, CatalogLayer, MediaLayer, and dynamic data layers.
 
 ## WMSLayer (Web Map Service)
 
@@ -404,6 +404,272 @@ layerList.listItemCreatedFunction = (event) => {
 };
 ```
 
+## MediaLayer
+
+### MediaLayer Basics
+
+#### Create MediaLayer with Images
+```javascript
+import MediaLayer from "@arcgis/core/layers/MediaLayer.js";
+import ImageElement from "@arcgis/core/layers/support/ImageElement.js";
+import ExtentAndRotationGeoreference from "@arcgis/core/layers/support/ExtentAndRotationGeoreference.js";
+import Extent from "@arcgis/core/geometry/Extent.js";
+
+const imageElement = new ImageElement({
+  image: "https://example.com/historical-map.png",
+  georeference: new ExtentAndRotationGeoreference({
+    extent: new Extent({
+      xmin: -10047456,
+      ymin: 3486722,
+      xmax: -10006982,
+      ymax: 3514468,
+      spatialReference: { wkid: 102100 }
+    })
+  })
+});
+
+const mediaLayer = new MediaLayer({
+  source: [imageElement],
+  title: "Historical Map"
+});
+
+map.add(mediaLayer);
+```
+
+#### Multiple Images
+```javascript
+const imageInfos = [
+  {
+    url: "image1.png",
+    extent: { xmin: -100, ymin: 30, xmax: -90, ymax: 40 }
+  },
+  {
+    url: "image2.png",
+    extent: { xmin: -95, ymin: 35, xmax: -85, ymax: 45 }
+  }
+];
+
+const imageElements = imageInfos.map(info => new ImageElement({
+  image: info.url,
+  georeference: new ExtentAndRotationGeoreference({
+    extent: new Extent({
+      ...info.extent,
+      spatialReference: { wkid: 4326 }
+    })
+  })
+}));
+
+const mediaLayer = new MediaLayer({
+  source: imageElements
+});
+```
+
+### Georeferencing Methods
+
+#### Extent and Rotation
+```javascript
+const georeference = new ExtentAndRotationGeoreference({
+  extent: new Extent({
+    xmin: -122.5,
+    ymin: 37.5,
+    xmax: -122.0,
+    ymax: 38.0,
+    spatialReference: { wkid: 4326 }
+  }),
+  rotation: 15 // Degrees clockwise
+});
+```
+
+#### Control Points (Corners)
+```javascript
+import ControlPointsGeoreference from "@arcgis/core/layers/support/ControlPointsGeoreference.js";
+
+const georeference = new ControlPointsGeoreference({
+  controlPoints: [
+    {
+      sourcePoint: { x: 0, y: 0 },           // Top-left of image (pixels)
+      mapPoint: { x: -122.5, y: 38.0 }       // Map coordinates
+    },
+    {
+      sourcePoint: { x: 1000, y: 0 },        // Top-right
+      mapPoint: { x: -122.0, y: 38.0 }
+    },
+    {
+      sourcePoint: { x: 1000, y: 800 },      // Bottom-right
+      mapPoint: { x: -122.0, y: 37.5 }
+    },
+    {
+      sourcePoint: { x: 0, y: 800 },         // Bottom-left
+      mapPoint: { x: -122.5, y: 37.5 }
+    }
+  ],
+  width: 1000,  // Image width in pixels
+  height: 800   // Image height in pixels
+});
+```
+
+### Video Elements
+
+```javascript
+import VideoElement from "@arcgis/core/layers/support/VideoElement.js";
+
+const videoElement = new VideoElement({
+  video: "https://example.com/timelapse.mp4",
+  georeference: new ExtentAndRotationGeoreference({
+    extent: new Extent({
+      xmin: -122.5,
+      ymin: 37.5,
+      xmax: -122.0,
+      ymax: 38.0,
+      spatialReference: { wkid: 4326 }
+    })
+  })
+});
+
+const mediaLayer = new MediaLayer({
+  source: [videoElement]
+});
+
+// Control video playback
+videoElement.content.play();
+videoElement.content.pause();
+videoElement.content.currentTime = 30; // Seek to 30 seconds
+```
+
+### Animated GIF
+
+```javascript
+// Animated GIFs work like regular images
+const gifElement = new ImageElement({
+  image: "https://example.com/weather-animation.gif",
+  georeference: new ExtentAndRotationGeoreference({
+    extent: new Extent({
+      xmin: -130,
+      ymin: 25,
+      xmax: -65,
+      ymax: 50,
+      spatialReference: { wkid: 4326 }
+    })
+  })
+});
+
+const mediaLayer = new MediaLayer({
+  source: [gifElement]
+});
+```
+
+### Layer Configuration
+
+#### Opacity and Blend Mode
+```javascript
+const mediaLayer = new MediaLayer({
+  source: [imageElement],
+  opacity: 0.7,
+  blendMode: "multiply" // normal, multiply, luminosity, etc.
+});
+
+// Change opacity dynamically
+mediaLayer.opacity = 0.5;
+
+// Change blend mode
+mediaLayer.blendMode = "luminosity";
+```
+
+#### Element Opacity
+```javascript
+// Individual element opacity
+imageElement.opacity = 0.8;
+
+// Update dynamically
+document.getElementById("opacitySlider").addEventListener("input", (e) => {
+  imageElement.opacity = e.target.value / 100;
+});
+```
+
+### Managing Source Elements
+
+```javascript
+// Access source
+const source = mediaLayer.source;
+
+// Add elements
+source.elements.push(newImageElement);
+source.elements.push(element1, element2);
+
+// Remove elements
+source.elements.splice(source.elements.indexOf(imageElement), 1);
+source.elements.length = 0; // Remove all
+
+// Iterate elements
+source.elements.forEach(element => {
+  console.log(element.image || element.video);
+});
+```
+
+### Interactive Control Points
+
+```javascript
+// Enable interactive editing of georeference control points
+const mediaLayerView = await view.whenLayerView(mediaLayer);
+
+// Enable interactive mode to allow control point editing
+mediaLayerView.interactive = true;
+
+// Disable interactive mode
+mediaLayerView.interactive = false;
+```
+
+### Complete Example
+
+```html
+<arcgis-map center="-89.93, 29.97" zoom="10">
+  <arcgis-zoom slot="top-left"></arcgis-zoom>
+</arcgis-map>
+
+<script type="module">
+  import MediaLayer from "@arcgis/core/layers/MediaLayer.js";
+  import ImageElement from "@arcgis/core/layers/support/ImageElement.js";
+  import ExtentAndRotationGeoreference from "@arcgis/core/layers/support/ExtentAndRotationGeoreference.js";
+  import Extent from "@arcgis/core/geometry/Extent.js";
+  import Map from "@arcgis/core/Map.js";
+
+  const viewElement = document.querySelector("arcgis-map");
+
+  // Create image elements for historical maps
+  const imageElements = [
+    {
+      name: "1891 Map",
+      url: "https://example.com/map-1891.png",
+      extent: { xmin: -10047456, ymin: 3486722, xmax: -10006982, ymax: 3514468 }
+    },
+    {
+      name: "1920 Map",
+      url: "https://example.com/map-1920.png",
+      extent: { xmin: -10045000, ymin: 3488000, xmax: -10008000, ymax: 3516000 }
+    }
+  ].map(info => new ImageElement({
+    image: info.url,
+    georeference: new ExtentAndRotationGeoreference({
+      extent: new Extent({
+        ...info.extent,
+        spatialReference: { wkid: 102100 }
+      })
+    })
+  }));
+
+  const mediaLayer = new MediaLayer({
+    source: imageElements,
+    title: "Historical Maps",
+    blendMode: "normal"
+  });
+
+  viewElement.map = new Map({
+    basemap: "topo-vector",
+    layers: [mediaLayer]
+  });
+</script>
+```
+
 ## Layer Comparison
 
 | Layer Type | Use Case | Data Source |
@@ -414,6 +680,19 @@ layerList.listItemCreatedFunction = (event) => {
 | OGCFeatureLayer | Vector from OGC API - Features | OGC API |
 | MapImageLayer | Server-rendered imagery | ArcGIS Map Service |
 | CatalogLayer | Collection of layers | ArcGIS Catalog Service |
+| MediaLayer | Georeferenced images, video, GIFs | Local/remote media |
+
+## Reference Samples
+
+- `layers-wms` - Adding and configuring WMS layers
+- `layers-wfs` - Working with WFS layers
+- `layers-ogcfeaturelayer` - OGC Features API layer usage
+- `layers-mapimagelayer` - Dynamic MapImageLayer configuration
+- `layers-cataloglayer` - Using CatalogLayer to browse portal content
+- `layers-medialayer-images` - Displaying images with MediaLayer
+- `layers-medialayer-video` - Video playback in MediaLayer
+- `layers-medialayer-control-points` - Control point placement for media
+- `layers-medialayer-interactive` - Interactive media layer manipulation
 
 ## Common Pitfalls
 
@@ -429,3 +708,7 @@ layerList.listItemCreatedFunction = (event) => {
 
 6. **Field prefixes**: In joined tables, prefix field names with table name (e.g., `ancestry.Norwegian`)
 
+7. **Media CORS**: Images and videos from external servers need CORS headers
+
+8. **Video autoplay**: Browsers may block autoplay - require user interaction first
+

package/contexts/4.34/skills/arcgis-arcade/SKILL.md

@@ -284,7 +284,7 @@ $datastore               // Reference to data store
 ## Execute Arcade Programmatically
 
 ```javascript
-import Arcade from "@arcgis/core/arcade/Arcade.js";
+import * as arcade from "@arcgis/core/arcade.js";
 
 // Create profile
 const profile = {
@@ -295,13 +295,13 @@ const profile = {
 };
 
 // Compile expression
-const executor = await Arcade.createArcadeExecutor(
+const executor = await arcade.createArcadeExecutor(
   "Round($feature.value * 100, 2)",
   profile
 );
 
 // Execute with feature
-const result = executor.execute({
+const result = await executor.executeAsync({
   $feature: graphic
 });
 
@@ -352,6 +352,11 @@ layer.renderer = {
 
 > **Tip:** See [arcgis-core-maps skill](../arcgis-core-maps/SKILL.md) for detailed guidance on autocasting vs explicit classes.
 
+## Reference Samples
+
+- `popuptemplate-arcade` - Arcade expressions in PopupTemplates
+- `popuptemplate-arcade-expression-content` - Arcade expression content in popups
+
 ## Common Pitfalls
 
 1. **Null values**: Check for nulls with `IsEmpty($feature.field)`