arcgis-imagery

Work with raster and imagery data using ImageryLayer, ImageryTileLayer, pixel filtering, raster functions, multidimensional data, and oriented imagery. Use for satellite imagery, elevation data, and scientific raster datasets.

Quality

86%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Passed

No known issues

ArcGIS Imagery

Use this skill for raster imagery, pixel-level operations, raster functions, multidimensional data, and oriented imagery viewers.

Import Patterns

ESM (npm)

import ImageryLayer from "@arcgis/core/layers/ImageryLayer.js";
import ImageryTileLayer from "@arcgis/core/layers/ImageryTileLayer.js";
import OrientedImageryLayer from "@arcgis/core/layers/OrientedImageryLayer.js";
import RasterFunction from "@arcgis/core/layers/support/RasterFunction.js";
import MosaicRule from "@arcgis/core/layers/support/MosaicRule.js";
import DimensionalDefinition from "@arcgis/core/layers/support/DimensionalDefinition.js";
import MultidimensionalSubset from "@arcgis/core/layers/support/MultidimensionalSubset.js";

CDN (dynamic import)

const ImageryLayer = await $arcgis.import("@arcgis/core/layers/ImageryLayer.js");
const ImageryTileLayer = await $arcgis.import("@arcgis/core/layers/ImageryTileLayer.js");
const RasterFunction = await $arcgis.import("@arcgis/core/layers/support/RasterFunction.js");

ImageryLayer

ImageryLayer connects to ArcGIS Image Services for dynamic raster data.

Basic ImageryLayer

const imageryLayer = new ImageryLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/ScientificData/SeaTemperature/ImageServer"
});

map.add(imageryLayer);

ImageryLayer with Popup

const imageryLayer = new ImageryLayer({
  url: "...",
  popupTemplate: {
    title: "Raster Value",
    content: "{Raster.ServicePixelValue}"
  }
});

Key ImageryLayer Properties

Property	Type	Description
`url`	string	ImageServer REST endpoint
`format`	string	Output format (`"jpgpng"`, `"tiff"`, etc.)
`bandIds`	number[]	Which bands to display
`rasterFunction`	RasterFunction	Server-side processing
`mosaicRule`	MosaicRule	Raster combination rules
`pixelFilter`	Function	Client-side pixel processing
`renderingRule`	object	Client-side rendering rules (JSON)

ImageryTileLayer

ImageryTileLayer provides fast tiled access to imagery, including Cloud-Optimized GeoTIFF (COG).

Basic ImageryTileLayer

const imageryTileLayer = new ImageryTileLayer({
  url: "https://tiledimageservices.arcgis.com/..."
});

map.add(imageryTileLayer);

Cloud Optimized GeoTIFF (COG)

const imageryTileLayer = new ImageryTileLayer({
  url: "https://example.com/image.tif",
  title: "COG Layer"
});

Raster Functions

Apply Raster Function

// Hillshade
const hillshadeFunction = new RasterFunction({
  functionName: "Hillshade",
  functionArguments: {
    azimuth: 315,
    altitude: 45,
    zFactor: 1
  }
});

imageryLayer.rasterFunction = hillshadeFunction;

Common Raster Functions

// Stretch
const stretchFunction = new RasterFunction({
  functionName: "Stretch",
  functionArguments: {
    stretchType: 3,
    numberOfStandardDeviations: 2
  }
});

// Colormap
const colormapFunction = new RasterFunction({
  functionName: "Colormap",
  functionArguments: {
    colormap: [[1, 255, 0, 0], [2, 0, 255, 0], [3, 0, 0, 255]]
  }
});

// NDVI
const ndviFunction = new RasterFunction({
  functionName: "NDVI",
  functionArguments: {
    visibleBandID: 3,
    infraredBandID: 4
  }
});

RasterFunction Properties

Property	Type	Description
`functionName`	string	Name of the raster function
`functionArguments`	object	Parameters for the function
`outputType`	string	Output pixel type

Common function names: Hillshade, Stretch, Colormap, NDVI, GVITINDEX, SAVI, Pansharpening, Convolution, MLClassify

Mosaic Rules

const mosaicRule = new MosaicRule({
  mosaicMethod: "center",         // "center", "northwest", "nadir", "lock-raster", "by-attribute"
  mosaicOperator: "first",        // "first", "last", "min", "max", "mean", "sum", "blend"
  lockRasterIds: [1, 2, 3],       // Lock to specific rasters
  multidimensionalDefinition: []  // For multidimensional data
});

imageryLayer.mosaicRule = mosaicRule;

Multidimensional Data

DimensionalDefinition

// Define dimensions (depth, time, etc.)
const dimInfo = [];

// Depth dimension
dimInfo.push(new DimensionalDefinition({
  dimensionName: "StdZ",
  values: [0],
  isSlice: true
}));

// Time dimension
dimInfo.push(new DimensionalDefinition({
  dimensionName: "StdTime",
  values: [1396828800000],
  isSlice: true
}));

const mosaicRule = new MosaicRule({
  multidimensionalDefinition: dimInfo
});

const layer = new ImageryLayer({
  url: "...",
  mosaicRule: mosaicRule
});

Accessing Multidimensional Info

await imageryLayer.load();

const dimensions = imageryLayer.multidimensionalInfo.dimensions;
dimensions.forEach(dim => {
  console.log("Dimension:", dim.name);
  console.log("Values:", dim.values);
  console.log("Unit:", dim.unit);
});

ImageryTileLayer Multidimensional

const layer = new ImageryTileLayer({
  url: "...",
  multidimensionalSubset: {
    dimensions: [
      { name: "StdTime", values: [/* epoch ms */] },
      { name: "StdZ", values: [/* depth values */] }
    ]
  },
  multidimensionalDefinition: [
    new DimensionalDefinition({
      dimensionName: "StdTime",
      values: [1609459200000]
    })
  ]
});

Common dimension names: StdTime, StdZ, StdPlev, StdDepth

Pixel Filtering

Custom Pixel Filter

const imageryLayer = new ImageryLayer({
  url: "...",
  pixelFilter: processPixels
});

function processPixels(pixelData) {
  if (!pixelData || !pixelData.pixelBlock) return;

  const pixelBlock = pixelData.pixelBlock;
  const pixels = pixelBlock.pixels;
  let mask = pixelBlock.mask;
  const numPixels = pixelBlock.width * pixelBlock.height;

  const minVal = pixelBlock.statistics[0].minValue;
  const maxVal = pixelBlock.statistics[0].maxValue;
  const factor = 255 / (maxVal - minVal);

  const band = pixels[0];
  const rBand = new Uint8Array(numPixels);
  const gBand = new Uint8Array(numPixels);
  const bBand = new Uint8Array(numPixels);

  if (!mask) {
    mask = new Uint8Array(numPixels);
    mask.fill(1);
    pixelBlock.mask = mask;
  }

  for (let i = 0; i < numPixels; i++) {
    if (mask[i] === 0) continue;
    const normalized = (band[i] - minVal) * factor;
    rBand[i] = normalized;
    gBand[i] = 0;
    bBand[i] = 255 - normalized;
  }

  pixelData.pixelBlock.pixels = [rBand, gBand, bBand];
  pixelData.pixelBlock.statistics = null;
  pixelData.pixelBlock.pixelType = "u8";
}

Masking Pixels by Value

let minThreshold = 0;
let maxThreshold = 100;

function maskPixels(pixelData) {
  if (!pixelData || !pixelData.pixelBlock) return;

  const pixelBlock = pixelData.pixelBlock;
  const pixels = pixelBlock.pixels[0];
  let mask = pixelBlock.mask;

  if (!mask) {
    mask = new Uint8Array(pixels.length);
    mask.fill(1);
    pixelBlock.mask = mask;
  }

  for (let i = 0; i < pixels.length; i++) {
    mask[i] = (pixels[i] >= minThreshold && pixels[i] <= maxThreshold) ? 1 : 0;
  }
}

// Update thresholds and redraw
function updateThresholds(min, max) {
  minThreshold = min;
  maxThreshold = max;
  imageryLayer.redraw();
}

PixelBlock Structure

Property	Type	Description
`pixels`	TypedArray[]	One array per band
`mask`	Uint8Array	0 = transparent, 1 = opaque
`statistics`	object[]	`{ minValue, maxValue }` per band
`width`	number	Pixel block width
`height`	number	Pixel block height
`pixelType`	string	`"u8"`, `"u16"`, `"u32"`, `"s16"`, `"s32"`, `"f32"`, `"f64"`

Band Combinations

// Select specific bands
imageryLayer.bandIds = [4, 3, 2]; // NIR, Red, Green (False color)

// Common band combinations
// Natural color: [1, 2, 3] (R, G, B)
// False color: [4, 3, 2] (NIR, R, G)
// SWIR: [7, 5, 4] (SWIR, NIR, R)

Identify (Query Pixel Values)

view.on("click", async (event) => {
  const result = await imageryLayer.identify({
    geometry: event.mapPoint,
    returnGeometry: false,
    returnCatalogItems: true
  });

  console.log("Pixel value:", result.value);
  console.log("Catalog items:", result.catalogItems);
});

Raster Statistics

await imageryLayer.load();

const stats = imageryLayer.serviceRasterInfo.statistics;
console.log("Min:", stats[0].min);
console.log("Max:", stats[0].max);
console.log("Mean:", stats[0].avg);
console.log("StdDev:", stats[0].stddev);

Oriented Imagery

OrientedImageryLayer

const oiLayer = new OrientedImageryLayer({
  url: "https://services.arcgis.com/.../FeatureServer/0"
});

map.add(oiLayer);

OrientedImageryViewer Widget

import OrientedImageryViewer from "@arcgis/core/widgets/OrientedImageryViewer.js";

const oiViewer = new OrientedImageryViewer({
  view: view
});

view.ui.add(oiViewer, "top-right");

Imagery Components

Component	Purpose
`arcgis-oriented-imagery-viewer`	View and navigate oriented imagery
`arcgis-video-player`	Play video feeds from video services

Common Pitfalls

Pixel filter performance: Complex pixel filters run on every render — optimize loops and minimize allocations.
Band array indices: Band IDs are 1-based in services but 0-based in bandIds arrays.
Coordinate systems: Imagery may need reprojection to match the view's spatial reference.
Memory with large images: Use ImageryTileLayer for large datasets; it tiles automatically.
Pixel type conversion: Be careful when changing pixelType in pixel filters — mismatches cause artifacts.
Redraw after filter changes: Call imageryLayer.redraw() after modifying external variables used in pixelFilter.

Reference Samples

layers-imagerylayer — Basic ImageryLayer
layers-imagery-pixelvalues — Querying pixel values
layers-imagery-rasterfunction — Raster function processing
layers-imagery-multidimensional — Multidimensional imagery
layers-imagerytilelayer — ImageryTileLayer
layers-imagerytilelayer-cog — Cloud-Optimized GeoTIFF
layers-imagery-renderer — Imagery renderers
layers-imagery-clientside — Client-side imagery processing
layers-orientedimagerylayer — Oriented imagery

Related Skills

arcgis-time-animation — Time-aware imagery animation
arcgis-layers — Common layer patterns
arcgis-smart-mapping — Auto-generated renderers
arcgis-custom-rendering — Custom tile layer rendering

Repository: SaschaBrunnerCH/arcgis-maps-sdk-js-ai-context
Commit: d84407b

Last updated: 1 day ago
Created: 1 day ago

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.