arcgis-smart-mapping

Auto-generate renderers, calculate statistics, and create data-driven visualizations. Use for class breaks, unique values, heatmaps, dot density, relationship maps, and getting histogram/summary statistics.

Quality

74%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./contexts/4.34/skills/arcgis-smart-mapping/SKILL.md

ArcGIS Smart Mapping

Use this skill to auto-generate renderers based on data, calculate statistics, and create intelligent visualizations.

Smart Mapping Overview

Module	Purpose
`smartMapping/renderers/*`	Generate renderers automatically
`smartMapping/statistics/*`	Calculate data statistics
`smartMapping/symbology/*`	Get color schemes and symbols
`smartMapping/heuristics/*`	Determine optimal visualization settings
`smartMapping/raster/*`	Generate raster-specific renderers

Renderer Creators

Color Renderer (Continuous)

Creates a renderer with color gradient based on numeric values.

import * as colorRendererCreator from "@arcgis/core/smartMapping/renderers/color.js";

const { renderer, visualVariable, colorScheme } = await colorRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  view: view,
  field: "population",
  theme: "high-to-low",  // high-to-low, above, below, centered-on, extremes
  colorScheme: {
    id: "esri-blue-5"  // Optional: specify color scheme
  }
});

featureLayer.renderer = renderer;

Color Renderer (Class Breaks)

Creates a renderer with distinct color classes.

const { renderer, classBreakInfos } = await colorRendererCreator.createClassBreaksRenderer({
  layer: featureLayer,
  view: view,
  field: "income",
  classificationMethod: "natural-breaks",  // equal-interval, quantile, standard-deviation
  numClasses: 5,
  colorScheme: {
    id: "esri-orange-9"
  }
});

featureLayer.renderer = renderer;

Size Renderer (Continuous)

Varies symbol size based on data values.

import * as sizeRendererCreator from "@arcgis/core/smartMapping/renderers/size.js";

const { renderer, visualVariable } = await sizeRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  view: view,
  field: "magnitude",
  sizeScheme: {
    minSize: 4,
    maxSize: 40
  }
});

featureLayer.renderer = renderer;

Size Renderer (Class Breaks)

const { renderer } = await sizeRendererCreator.createClassBreaksRenderer({
  layer: featureLayer,
  view: view,
  field: "sales",
  classificationMethod: "quantile",
  numClasses: 4
});

Type (Unique Values) Renderer

Creates a renderer for categorical data.

import * as typeRendererCreator from "@arcgis/core/smartMapping/renderers/type.js";

const { renderer, uniqueValueInfos } = await typeRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  field: "landuse",
  numTypes: 10,  // Maximum categories before "Other"
  sortBy: "count"  // value, count
});

featureLayer.renderer = renderer;

Heatmap Renderer

Creates a heatmap for point density visualization.

import * as heatmapRendererCreator from "@arcgis/core/smartMapping/renderers/heatmap.js";

const { renderer } = await heatmapRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  field: "magnitude",  // Optional: weight by field
  colorScheme: {
    id: "esri-fire"
  },
  radius: 18,
  minDensity: 0,
  maxDensity: 0.05
});

featureLayer.renderer = renderer;

Dot Density Renderer

Shows density using dots within polygons.

import * as dotDensityRendererCreator from "@arcgis/core/smartMapping/renderers/dotDensity.js";

const { renderer } = await dotDensityRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  attributes: [
    { field: "dem_votes", color: "blue", label: "Democrat" },
    { field: "rep_votes", color: "red", label: "Republican" }
  ],
  dotValue: 1000,  // Each dot represents 1000 votes
  dotBlendingEnabled: true
});

featureLayer.renderer = renderer;

Opacity Renderer

Varies opacity based on data values.

import * as opacityRendererCreator from "@arcgis/core/smartMapping/renderers/opacity.js";

const { renderer, visualVariable } = await opacityRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  field: "confidence",
  minOpacity: 0.1,
  maxOpacity: 1
});

Relationship Renderer

Shows relationship between two variables.

import * as relationshipRendererCreator from "@arcgis/core/smartMapping/renderers/relationship.js";

const { renderer } = await relationshipRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  field1: {
    field: "population"
  },
  field2: {
    field: "income"
  },
  numClasses: 3,  // 2, 3, or 4
  focus: "HH"  // HH, HL, LH, LL
});

Predominance Renderer

Shows which category has the highest value.

import * as predominanceRendererCreator from "@arcgis/core/smartMapping/renderers/predominance.js";

const { renderer } = await predominanceRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  fields: [
    { name: "dem_votes", label: "Democrat" },
    { name: "rep_votes", label: "Republican" },
    { name: "ind_votes", label: "Independent" }
  ],
  includeSizeVariable: true,  // Size by margin
  includeOpacityVariable: true  // Opacity by strength
});

Pie Chart Renderer

Creates pie charts for each feature.

import * as pieChartRendererCreator from "@arcgis/core/smartMapping/renderers/pieChart.js";

const { renderer } = await pieChartRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  attributes: [
    { field: "asian", label: "Asian" },
    { field: "black", label: "Black" },
    { field: "white", label: "White" },
    { field: "other", label: "Other" }
  ],
  sizeOptimizationEnabled: true
});

Univariate Color-Size Renderer

Combines color and size for a single variable.

import * as univariateRendererCreator from "@arcgis/core/smartMapping/renderers/univariateColorSize.js";

const { renderer } = await univariateRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  view: view,
  field: "population",
  theme: "above-and-below"
});

Location Renderer

Simple location-based visualization (no data driven).

import * as locationRendererCreator from "@arcgis/core/smartMapping/renderers/location.js";

const { renderer } = await locationRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  color: [0, 112, 255]
});

Statistics Functions

Class Breaks

Calculate optimal class break values.

import classBreaksStats from "@arcgis/core/smartMapping/statistics/classBreaks.js";

const result = await classBreaksStats({
  layer: featureLayer,
  field: "population",
  classificationMethod: "natural-breaks",  // equal-interval, quantile, standard-deviation
  numClasses: 5,
  normalizationField: "area"  // Optional
});

console.log(result.classBreakInfos);
// [{ minValue: 0, maxValue: 1000, count: 50 }, ...]

Histogram

Get histogram data for a field.

import histogram from "@arcgis/core/smartMapping/statistics/histogram.js";

const result = await histogram({
  layer: featureLayer,
  field: "income",
  numBins: 20,
  minValue: 0,
  maxValue: 200000
});

console.log(result.bins);
// [{ minValue: 0, maxValue: 10000, count: 150 }, ...]
console.log(result.source);  // min, max, avg, stddev

Summary Statistics

Get statistical summary for a field.

import summaryStatistics from "@arcgis/core/smartMapping/statistics/summaryStatistics.js";

const result = await summaryStatistics({
  layer: featureLayer,
  field: "temperature"
});

console.log(result.avg);      // Mean
console.log(result.count);    // Feature count
console.log(result.max);      // Maximum
console.log(result.min);      // Minimum
console.log(result.stddev);   // Standard deviation
console.log(result.sum);      // Sum
console.log(result.variance); // Variance

Summary Statistics for Age

Calculate age-based statistics from date field.

import summaryStatisticsForAge from "@arcgis/core/smartMapping/statistics/summaryStatisticsForAge.js";

const result = await summaryStatisticsForAge({
  layer: featureLayer,
  field: "construction_date",
  unit: "years"  // years, months, days, hours, minutes, seconds
});

console.log(result.avg);  // Average age in years

Unique Values

Get all unique values for a field.

import uniqueValues from "@arcgis/core/smartMapping/statistics/uniqueValues.js";

const result = await uniqueValues({
  layer: featureLayer,
  field: "category"
});

console.log(result.uniqueValueInfos);
// [{ value: "Type A", count: 100, symbol: ... }, ...]

Predominant Categories

Find which category is most common.

import predominantCategories from "@arcgis/core/smartMapping/statistics/predominantCategories.js";

const result = await predominantCategories({
  layer: featureLayer,
  fields: ["typeA_count", "typeB_count", "typeC_count"]
});

console.log(result.predominantCategoryInfos);
// [{ value: "typeA_count", count: 500 }, ...]

Heatmap Statistics

Get statistics for heatmap configuration.

import heatmapStatistics from "@arcgis/core/smartMapping/statistics/heatmapStatistics.js";

const result = await heatmapStatistics({
  layer: featureLayer,
  view: view,
  field: "magnitude"
});

console.log(result.maxDensity);
console.log(result.minDensity);

Symbology (Color Schemes)

Get Color Schemes

import symbologyColor from "@arcgis/core/smartMapping/symbology/color.js";

// Get schemes for sequential data
const schemes = symbologyColor.getSchemes({
  geometryType: "polygon",
  theme: "high-to-low"
});

console.log(schemes.primaryScheme);    // Best match
console.log(schemes.secondarySchemes); // Alternatives

// Get scheme by name
const scheme = symbologyColor.getSchemeByName({
  geometryType: "polygon",
  name: "Blue 5",
  theme: "high-to-low"
});

Color Scheme Themes

high-to-low - Sequential (low to high values)
above-and-below - Diverging (center point)
centered-on - Centered on specific value
extremes - Emphasize high and low

Get Color Ramps

import * as colorRamps from "@arcgis/core/smartMapping/symbology/support/colorRamps.js";

const allRamps = colorRamps.all();
// Returns array of color ramp objects

const byName = colorRamps.byName("Green-Brown");
// Returns specific color ramp

Heuristics

Size Range

Calculate optimal size range for data.

import sizeRange from "@arcgis/core/smartMapping/heuristics/sizeRange.js";

const result = await sizeRange({
  layer: featureLayer,
  view: view,
  field: "population"
});

console.log(result.minSize);  // Suggested minimum symbol size
console.log(result.maxSize);  // Suggested maximum symbol size

Scale Range

Determine appropriate scale range for visualization.

import scaleRange from "@arcgis/core/smartMapping/heuristics/scaleRange.js";

const result = await scaleRange({
  layer: featureLayer,
  view: view
});

console.log(result.minScale);
console.log(result.maxScale);

Raster Smart Mapping

Class Breaks Raster Renderer

import rasterClassBreaks from "@arcgis/core/smartMapping/raster/renderers/classBreaks.js";

const { renderer } = await rasterClassBreaks.createRenderer({
  layer: imageryLayer,
  view: view,
  classificationMethod: "natural-breaks",
  numClasses: 5
});

imageryLayer.renderer = renderer;

Stretch Raster Renderer

import rasterStretch from "@arcgis/core/smartMapping/raster/renderers/stretch.js";

const { renderer } = await rasterStretch.createRenderer({
  layer: imageryLayer,
  view: view,
  stretchType: "standard-deviation",  // min-max, standard-deviation, histogram-equalization
  numberOfStandardDeviations: 2
});

Colormap Raster Renderer

import rasterColormap from "@arcgis/core/smartMapping/raster/renderers/colormap.js";

const { renderer } = await rasterColormap.createRenderer({
  layer: imageryLayer,
  view: view
});

RGB Raster Renderer

import rasterRGB from "@arcgis/core/smartMapping/raster/renderers/rgb.js";

const { renderer } = await rasterRGB.createRenderer({
  layer: imageryLayer,
  view: view,
  bandIds: [4, 3, 2]  // NIR, Red, Green (false color)
});

Vector Field Renderer

For wind, current, or flow data.

import rasterVectorField from "@arcgis/core/smartMapping/raster/renderers/vectorField.js";

const { renderer } = await rasterVectorField.createRenderer({
  layer: imageryLayer,
  view: view,
  style: "beaufort-wind"  // single-arrow, wind-barb, beaufort-wind, classified-arrow
});

Flow Renderer

Animated flow visualization.

import rasterFlow from "@arcgis/core/smartMapping/raster/renderers/flow.js";

const { renderer } = await rasterFlow.createRenderer({
  layer: imageryLayer,
  view: view
});

Visual Variables

Create Visual Variable

import * as colorVV from "@arcgis/core/smartMapping/renderers/color.js";

const { visualVariable } = await colorVV.createVisualVariable({
  layer: featureLayer,
  view: view,
  field: "temperature",
  theme: "high-to-low"
});

// Add to existing renderer
renderer.visualVariables = [visualVariable];

Update Renderer with Statistics

// Get existing renderer's visual variable
const colorVV = renderer.visualVariables.find(vv => vv.type === "color");

// Get new statistics
const stats = await summaryStatistics({
  layer: featureLayer,
  field: colorVV.field
});

// Update stops based on new statistics
colorVV.stops = [
  { value: stats.min, color: [255, 255, 178] },
  { value: stats.avg, color: [253, 141, 60] },
  { value: stats.max, color: [189, 0, 38] }
];

Common Patterns

Complete Smart Mapping Workflow

// 1. Create renderer
const { renderer } = await colorRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  view: view,
  field: "population"
});

// 2. Get histogram for legend/slider
const histogramResult = await histogram({
  layer: featureLayer,
  field: "population",
  numBins: 50
});

// 3. Apply renderer
featureLayer.renderer = renderer;

// 4. Create histogram slider widget
const slider = new HistogramRangeSlider({
  bins: histogramResult.bins,
  min: histogramResult.minValue,
  max: histogramResult.maxValue,
  values: [histogramResult.minValue, histogramResult.maxValue]
});

Dynamic Renderer Updates

// Listen for extent changes and update renderer
view.watch("extent", async () => {
  const stats = await summaryStatistics({
    layer: featureLayer,
    field: "population",
    view: view  // Limit to current extent
  });

  // Update visual variable stops
  updateRendererStops(featureLayer.renderer, stats);
});

Multi-Variable Visualization

// Color by one variable, size by another
const colorResult = await colorRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  view: view,
  field: "income"
});

const sizeResult = await sizeRendererCreator.createVisualVariables({
  layer: featureLayer,
  view: view,
  field: "population"
});

colorResult.renderer.visualVariables.push(sizeResult.visualVariable);
featureLayer.renderer = colorResult.renderer;

Reference Samples

visualization-sm-color - Smart mapping with color renderers
visualization-sm-size - Smart mapping with size renderers
visualization-sm-types - Smart mapping for unique value types
visualization-sm-relationship - Relationship smart mapping
visualization-histogram-color - Histogram-driven color visualization

Common Pitfalls

View Required: Most smart mapping functions require a view for scale-dependent calculations

// Always pass the view
const { renderer } = await colorRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  view: view,  // Required!
  field: "population"
});

Async Operations: All smart mapping functions are asynchronous

// Always await results
const { renderer } = await colorRendererCreator.createContinuousRenderer({...});

Field Type: Ensure field type matches renderer type
- Numeric fields for color/size continuous
- String/coded value fields for type/unique values

Layer Requirements: Layer must be loaded and have the field

await featureLayer.load();
const { renderer } = await colorRendererCreator.createContinuousRenderer({...});

Color Scheme Geometry: Color schemes are geometry-specific

const schemes = symbologyColor.getSchemes({
  geometryType: featureLayer.geometryType,  // point, polyline, polygon
  theme: "high-to-low"
});

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.