Visualize features by type

This sample demonstrates how to symbolize features in the same layer differently based on unique values or types. The data is stored in a single layer where the visualization of each feature depends on the value of one or more fields.

Prior to completing the following steps, you should be familiar with views, Map, and FeatureLayer. If necessary, complete the following tutorials first:

• Intro to MapView
• Intro to SceneView
• Intro to Layers
• Review the basic FeatureLayer sample

The basic components of this app, such as creating instances of the Map and MapView classes and understanding HTML and CSS structure will not be reviewed. See the tutorials listed above if you need to familiarize yourself with those components in this application. As a general rule the introductory principles discussed in the tutorials above apply to most samples in the documentation.

1. Create a symbol for each type

In this sample we add a new renderer to a layer representing major highways and roads in the United States. For the purposes of this app, we want to visualize each highway based on whether it's an interstate, U.S. highway, or other major highway or road.

First, we'll define a separate symbol for each type programmatically. We'll use a SimpleLineSymbol to visualize each type since they are polyline geometries.

// Symbol for freeways
const fwySym = {
  type: "simple-line", // autocasts as new SimpleLineSymbol()
  color: "#30ffea",
  width: 1,
  style: "solid"
};

// Symbol for U.S. Highways
const hwySym = {
  type: "simple-line", // autocasts as new SimpleLineSymbol()
  color: "#ff6207",
  width: 1,
  style: "solid"
};

// Symbol for other major highways
const otherSym = {
  type: "simple-line", // autocasts as new SimpleLineSymbol()
  color: "#ef37ac",
  width: 1,
  style: "solid"
};

2. Create an instance of UniqueValueRenderer

We must use a UniqueValueRenderer when defining how features should be visualized based on field values. Up to three fields may be used to create various combinations of types. In this case we're only visualizing each feature based on one field: CLASS.

const hwyRenderer = {
  type: "unique-value", // autocasts as new UniqueValueRenderer()
  field: "CLASS",
  defaultSymbol: otherSym, // used to visualize all features not matching specified types
  defaultLabel: "Other major highways" //  used in the legend for all other types not specified
};

3. Match unique values with each symbol

You can match symbols with unique field values in one of two ways: Using uniqueValueInfos in the constructor...

const hwyRenderer = {
  type: "unique-value", // autocasts as new UniqueValueRenderer()
  field: "CLASS",
  defaultSymbol: otherSym, // used to visualize all features not matching specified types
  defaultLabel: "Other major highways", //  used in the legend for all other types not specified
  // used for specifying unique values
  uniqueValueInfos: [
    {
      value: "I", // code for interstates/freeways
      symbol: fwySym,
      label: "Interstate" // used in the legend to describe features with this symbol
    },
    {
      value: "U", // code for U.S. highways
      symbol: hwySym,
      label: "US Highway" // used in the legend to describe features with this symbol
    }
  ]
};

Or with the addUniqueValueInfo() method.

hwyRenderer.addUniqueValueInfo("I", fwySym);

4. Summary

Once the renderer is defined, you can set it on the layer and the view and legend will automatically update. Click the sandbox button below to see the full code of the app.

5. Additional visualization tutorials and samples

• Visualize all features with the same symbol
• Scale feature sizes based on real world sizes (2D)
• Visualize features with realistic 3D symbols
• Visualize data with rotation
• Visualize features by type
• Data-driven continuous color
• Data-driven continuous size