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