Smart Mapping

Median household income in southern California.

Data visualization has a paradox: to properly visualize a dataset, you first need to be familiar with it; but to understand the data, you usually first have to visualize it.

Understanding the data involves knowing summary statistics, such as the maximum and minimum values, the mean, standard deviation, and the overall distribution. Without that understanding, you can easily create misleading visualizations and spend a lot of time on trial and error before getting a visualization right.

In addition to understanding the data, you should also be familiar with basic principles of cartography and color theory when creating a spatial data visualization. Not everyone has an eye for design and understands problems associated with visualizing numeric and categorical data with color.

In short, data visualization is hard and requires a lot of patience.

What is Smart Mapping?

Smart Mapping is designed to help developers get started with data visualization. It consists of more than a dozen APIs that generate renderers specific to an input dataset. These APIs are designed to help users and developers understand their data so they can make informed decisions best suited for visualizing it.

Smart mapping will help you understand the nature of the data (the statistics and spread), and suggest a set of color ramps designed by seasoned cartographers specifically for the desired style.

Developers can use the Smart Mapping APIs to:

  1. Familiarize themselves with an unknown or unfamiliar dataset.
  2. Select colorblind-friendly color ramps and schemes best suited for a layer given its background.
  3. Build apps that allow users to explore unfamiliar datasets using a variety of styles and widgets.
  4. Build apps that allow users to style layers and save them to webmaps.

How Smart Mapping works

Smart mapping consists of the following modules, organized by style:

The createRenderer method in each of these modules queries the summary statistics of the data, and selects a color scheme best suited for the given basemap or background color of the view.

Each smart mapping method typically requires the following:

  1. The layer to which the output renderer will be applied
  2. The view where the layer is rendered
  3. The field or Arcade expression containing the data for the visualization

The following example generates a continuous color renderer along a diverging (i.e. above-and-below) color ramp.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
const { renderer } = await colorRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  view: mapView,
  field: "Median_HH_Income",
  theme: "above-and-below"
});

featureLayer.renderer = renderer;
Median household income in southern California.

The methods exposed by these modules may be used in conjunction with the following slider widgets:

Image preview of related sample Size visual variable themes

Size visual variable themes

Size visual variable themes

Image preview of related sample Generate continuous color visualization

Generate continuous color visualization

Generate continuous color visualization

Image preview of related sample Generate data-driven visualization of unique values

Generate data-driven visualization of unique values

Generate data-driven visualization of unique values

Image preview of related sample Generate a class breaks visualization

Generate a class breaks visualization

Generate a class breaks visualization

Image preview of related sample Generate a relationship visualization

Generate a relationship visualization

Generate a relationship visualization

Image preview of related sample Generate a predominance visualization

Generate a predominance visualization

Generate a predominance visualization

Image preview of related sample Generate a dot density visualization

Generate a dot density visualization

Generate a dot density visualization

Image preview of related sample Customize ColorSlider Histogram

Customize ColorSlider Histogram

Customize ColorSlider Histogram

API support

2D3DArcadePointsLinesPolygonsMesh
Unique types
Class breaks
Visual variables1
Time
Multivariate
Predominance
Dot density
Charts
Relationship
Smart Mapping2333
Full supportPartial supportNo support
  • 1. Color only
  • 2. Size variable creators only supported for points
  • 3. Size variable creators not supported in 3D

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.