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" });