Unique types | ArcGIS Maps SDK for JavaScript

USA freeways styled with a unique value renderer displaying freeway types

What is a unique types style?

A unique types style assigns distinct symbols to unique data values returned from a field or expression in a layer. You can use this style to visualize what something represents, such as:

Show points of interest on a map (e.g. schools, parks, places of worship)
Represent categories of data (e.g. regions, types)
Visualize ordinal data (e.g. high, medium, and low)

How a unique types style works

This style is configured with a Unique Value Renderer. This renderer requires the following:

A reference to a data value either from a field name, or an Arcade expression.
A list of unique value infos that match a unique symbol with an expected value returned from the field or expression.

Examples

Categorical data

This example demonstrates how to visualize categories using a string attribute value. The app visualizes freeways based on their classification: interstate, state highway, or U.S. highway.

Create a Unique Value Renderer .
Reference the field name containing the classification values.
Create unique value info objects and assign a symbol to each expected value.
You can optionally add a default symbol to represent all features that don’t have a matching value.


35 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
    <title>Esri Developer Guide: Unique types</title>
7

8
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
9
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
10

11
    <style>
12
      html,
13
      body {
14
        height: 100%;
15
        margin: 0;
16
      }
17
    </style>
18
  </head>
19

20
  <body class="calcite-mode-dark">
21
    <arcgis-map item-id="625fed092fb14fdbb3f79089284b383a" center="-93.20, 44.91" scale="577790">
22
      <arcgis-legend slot="bottom-left"></arcgis-legend>
23
    </arcgis-map>
24

25
    <script type="module">
26
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
27

28
      const viewElement = document.querySelector("arcgis-map");
29
      await viewElement.viewOnReady();
30
      viewElement.constraints.snapToZoom = false;
31

32
      // Configure the base symbol style and color ramp for road types.
33
      const init = { type: "simple-line", style: "solid", width: "4px" };
34
      const colors = ["#dc4b00", "#3c6ccc", "#d9dc00", "#91d900", "#986ba1"];
35

36
      // Color and label each feature based on its matching field value.
37
      const renderer = {
38
        type: "unique-value", // autocasts as new UniqueValueRenderer()
39
        field: "RTTYP", // Treat features based on their route type code.
40
        defaultLabel: "Other",
41
        defaultSymbol: { ...init, color: colors[4] },
42
        // The colors and labels defined here will reflect in the legend.
43
        uniqueValueInfos: [
44
          { label: "Interstate", symbol: { ...init, color: colors[0] }, value: "I" },
45
          { label: "US Highway", symbol: { ...init, color: colors[1] }, value: "U" },
46
          { label: "State Highway", symbol: { ...init, color: colors[2] }, value: "S" },
47
          { label: "Major road", symbol: { ...init, color: colors[3] }, value: "M" },
48
        ],
49
        legendOptions: { title: "Route type" },
50
        // Define feature draw order by class position in uniqueValueInfos.
51
        orderByClassesEnabled: true,
52
      };
14 collapsed lines
53

54
      const layer = new FeatureLayer({
55
        // Fetch from a service containing primary road features.
56
        url: "https://services2.arcgis.com/FiaPA4ga0iQKduv3/ArcGIS/rest/services/Transportation_v1/FeatureServer/1",
57
        title: "US Road System",
58
        renderer,
59
        minScale: 0,
60
        maxScale: 0,
61
      });
62

63
      viewElement.map.add(layer); // Add the layer to the map.
64
    </script>
65
  </body>
66
</html>

Points of interest (3D)

This example demonstrates how to visualize points of interest (POI) in a 3D scene. This demo shows how to create POI symbols with a PictureMarkerSymbol. You can also use web styles to create the same visualization.

Create a unique value renderer .
Reference the field name containing the location type (e.g. museum, park, etc.).
Create unique value info objects and assign a symbol to each expected value.


89 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <title>Points of interest</title>
6

7
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
8
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
9
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
10

11
    <style>
12
      html,
13
      body,
14
      #viewDiv {
15
        height: 100%;
16
        margin: 0;
17
      }
18
    </style>
19

20
    <script type="module">
21
      const [WebScene, FeatureLayer, SceneView, Legend, Expand] = await $arcgis.import([
22
        "@arcgis/core/WebScene.js",
23
        "@arcgis/core/layers/FeatureLayer.js",
24
        "@arcgis/core/views/SceneView.js",
25
        "@arcgis/core/widgets/Legend.js",
26
        "@arcgis/core/widgets/Expand.js",
27
      ]);
28

29
      // Load the webscene with buildings
30

31
      const webscene = new WebScene({
32
        portalItem: {
33
          // autocasts as new PortalItem()
34
          id: "711ddecedece4fd88b728bfe4322c22b",
35
        },
36
      });
37

38
      const view = new SceneView({
39
        container: "viewDiv",
40
        map: webscene,
41
        environment: {
42
          lighting: {
43
            directShadowsEnabled: true,
44
          },
45
        },
46
      });
47

48
      // verticalOffset shifts the symbol vertically
49
      const verticalOffset = {
50
        screenLength: 40,
51
        maxWorldLength: 200,
52
        minWorldLength: 35,
53
      };
54

55
      // Function that automatically creates the symbol for the points of interest
56
      function getUniqueValueSymbol(name, color) {
57
        // The point symbol is visualized with an icon symbol. To clearly see the location of the point
58
        // we displace the icon vertically and add a callout line. The line connects the offset symbol with the location
59
        // of the point feature.
60
        return {
61
          type: "point-3d",
62
          symbolLayers: [
63
            {
64
              type: "icon",
65
              resource: {
66
                href: name,
67
              },
68
              size: 20,
69
              outline: {
70
                color: "white",
71
                size: 2,
72
              },
73
            },
74
          ],
75

76
          verticalOffset: verticalOffset,
77

78
          callout: {
79
            type: "line",
80
            color: "white",
81
            size: 2,
82
            border: {
83
              color: color,
84
            },
85
          },
86
        };
87
      }
88

89

90
      // Expand the code above to view how each marker
91
      // symbol is created in getUniqueValueSymbol()
92
      const pointsRenderer = {
93
        type: "unique-value",
94
        field: "Type",
95
        uniqueValueInfos: [
96
          {
97
            value: "Museum",
98
            symbol: getUniqueValueSymbol(
99
              "https://developers.arcgis.com/javascript/latest/assets/sample-code/visualization-point-styles/Museum.png",
100
              "#D13470",
101
            ),
102
          },
103
          {
104
            value: "Restaurant",
105
            symbol: getUniqueValueSymbol(
106
              "https://developers.arcgis.com/javascript/latest/assets/sample-code/visualization-point-styles/Restaurant.png",
107
              "#F97C5A",
108
            ),
109
          },
110
          {
111
            value: "Church",
112
            symbol: getUniqueValueSymbol(
113
             "https://developers.arcgis.com/javascript/latest/assets/sample-code/visualization-point-styles/Church.png",
114
              "#884614",
115
            ),
116
          },
117
          {
118
            value: "Hotel",
119
            symbol: getUniqueValueSymbol(
120
              "https://developers.arcgis.com/javascript/latest/assets/sample-code/visualization-point-styles/Hotel.png",
121
              "#56B2D6",
122
            ),
123
          },
124
          {
125
            value: "Park",
126
            symbol: getUniqueValueSymbol(
127
              "https://developers.arcgis.com/javascript/latest/assets/sample-code/visualization-point-styles/Park.png",
128
              "#40C2B4",
129
            ),
130
          },
131
        ],
132
      };
64 collapsed lines
133

134

135
      // Create the layer with the points of interest
136
      // Initially points are aligned to the buildings with relative-to-scene,
137
      // feature reduction is set to "selection" to avoid overlapping icons.
138
      // A perspective view is enabled on the layers by default.
139
      const pointsLayer = new FeatureLayer({
140
        url: "http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/LyonPointsOfInterest/FeatureServer",
141
        title: "Touristic attractions",
142
        elevationInfo: {
143
          // elevation mode that will place points on top of the buildings or other SceneLayer 3D objects
144
          mode: "relative-to-scene",
145
        },
146
        renderer: pointsRenderer,
147
        outFields: ["*"],
148
        // feature reduction is set to selection because our scene contains too many points and they overlap
149
        featureReduction: {
150
          type: "selection",
151
        },
152
        labelingInfo: [
153
          {
154
            labelExpressionInfo: {
155
              value: "{Name}",
156
            },
157
            symbol: {
158
              type: "label-3d", // autocasts as new LabelSymbol3D()
159
              symbolLayers: [
160
                {
161
                  type: "text", // autocasts as new TextSymbol3DLayer()
162
                  material: {
163
                    color: "white",
164
                  },
165
                  // we set a halo on the font to make the labels more visible with any kind of background
166
                  halo: {
167
                    size: 1,
168
                    color: [50, 50, 50],
169
                  },
170
                  size: 10,
171
                },
172
              ],
173
            },
174
          },
175
        ],
176
      });
177

178
      webscene.add(pointsLayer);
179

180
      const legend = new Legend({ view });
181

182
      view.ui.add(
183
        new Expand({
184
          view,
185
          content: legend,
186
          expanded: true,
187
        }),
188
        "top-right",
189
      );
190
    </script>
191
  </head>
192

193
  <body>
194
    <div id="viewDiv" class="esri-widget"></div>
195
  </body>
196
</html>

Ordinal data

This example demonstrates how to create ordinal categories from a numeric field attribute using an Arcade expression. This app classifies highways by low, medium, or high truck traffic.

Create a unique value renderer.
Write an Arcade expression to classify the data into ordinal categories: low, medium, and high. Then reference it in the valueExpression property. See the snippet below.
Create unique value info objects and assign a symbol to each expected value.
You can optionally add a default symbol to represent all features that don’t have a matching value.

Arcade expression classifying the numeric data

1
      var traffic = $feature.AADT;
2
      When(
3
        traffic > 80000, "High",
4
        traffic > 20000, "Medium",
5
        "Low"
6
      );

Reference the Arcade expression in the valueExpression property


32 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
    <title>Esri Developer Guide: Arcade-Unique types</title>
7

8
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
9
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
10
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
11

12
    <script type="text/arcade" id="traffic-classification">
13

14
      var traffic = $feature.AADT;
15
      When(
16
        traffic > 80000, "High",
17
        traffic > 20000, "Medium",
18
        "Low"
19
      );
20

21
    </script>
22

23
    <script type="module">
24
      const [Map, MapView, FeatureLayer, Legend, Expand] = await $arcgis.import([
25
        "@arcgis/core/Map.js",
26
        "@arcgis/core/views/MapView.js",
27
        "@arcgis/core/layers/FeatureLayer.js",
28
        "@arcgis/core/widgets/Legend.js",
29
        "@arcgis/core/widgets/Expand.js",
30
      ]);
31

32

33
      const renderer = {
34
        type: "unique-value",
35
        valueExpression: `
36
            var traffic = $feature.AADT;
37
            When(
38
              traffic > 80000, "High",
39
              traffic > 20000, "Medium",
40
              "Low"
41
            );
42
          `,
43
        valueExpressionTitle: "Traffic volume",
44
        uniqueValueInfos: [
45
          {
46
            value: "High",
47
            symbol: {
48
              type: "simple-line",
49
              color: "#810f7c",
50
              width: "6px",
51
              style: "solid",
52
            },
53
          },
54
          {
55
            value: "Medium",
56
            symbol: {
57
              type: "simple-line",
58
              color: "#8c96c6",
59
              width: "3px",
60
              style: "solid",
61
            },
62
          },
63
          {
64
            value: "Low",
65
            symbol: {
66
              type: "simple-line",
67
              color: "#9d978b",
68
              width: "1px",
69
              style: "solid",
70
            },
71
          },
72
        ],
73
      };
55 collapsed lines
74

75

76
      // Set the renderer on the layer
77
      const layer = new FeatureLayer({
78
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Florida_Annual_Average_Daily_Traffic/FeatureServer/0",
79
        renderer: renderer,
80
        title: "Annual average daily traffic",
81
        minScale: 0,
82
        maxSclae: 0,
83
      });
84

85
      // Add the layer to the map
86
      const map = new Map({
87
        basemap: "gray-vector",
88
        layers: [layer],
89
      });
90

91
      const view = new MapView({
92
        container: "viewDiv",
93
        map: map,
94
        center: [-80.215, 25.856],
95
        rotation: 90,
96
        scale: 144447,
97
        constraints: {
98
          snapToZoom: false,
99
        },
100
      });
101

102
      view.ui.add(
103
        new Expand({
104
          content: new Legend({
105
            view: view,
106
          }),
107
          view: view,
108
          expanded: true,
109
        }),
110
        "top-right",
111
      );
112
    </script>
113

114
    <style>
115
      html,
116
      body,
117
      #viewDiv {
118
        background-color: rgba(15, 15, 15, 1);
119
        height: 100%;
120
        margin: 0;
121
      }
122
    </style>
123
  </head>
124

125
  <body>
126
    <div id="viewDiv"></div>
127
  </body>
128
</html>

Categorical data (3D)

This example visualizes buildings based on building type: residential, commercial or mixed use. A unique value renderer assigns a color to each building based on the building’s usage attribute.

Steps

Create different symbols for each building type.
Assign the symbols to a unique value renderer.
Assign the renderer to the scene layer.


29 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
    <title>Esri Developer Guide: Visualize buildings by type</title>
7

8
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
9
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
10
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
11

12
    <style>
13
      html,
14
      body,
15
      #viewDiv {
16
        height: 100%;
17
        margin: 0;
18
      }
19
    </style>
20

21
    <script type="module">
22
      const [Map, SceneView, SceneLayer, Legend] = await $arcgis.import([
23
        "@arcgis/core/Map.js",
24
        "@arcgis/core/views/SceneView.js",
25
        "@arcgis/core/layers/SceneLayer.js",
26
        "@arcgis/core/widgets/Legend.js",
27
      ]);
28

29

30
      const typeRenderer = {
31
        type: "unique-value",
32
        legendOptions: {
33
          title: "Building Type",
34
        },
35
        defaultSymbol: {
36
          type: "mesh-3d",
37
          symbolLayers: [
38
            {
39
              type: "fill",
40
              material: { color: "#FFB55A", colorMixMode: "replace" },
41
            },
42
          ],
43
        },
44
        defaultLabel: "Others",
45
        field: "landuse",
46
        uniqueValueInfos: [
47
          {
48
            value: "MIPS",
49
            symbol: {
50
              type: "mesh-3d",
51
              symbolLayers: [
52
                {
53
                  type: "fill",
54
                  material: { color: "#FD7F6F", colorMixMode: "replace" },
55
                },
56
              ],
57
            },
58
            label: "Office",
59
          },
60
          {
61
            value: "RESIDENT",
62
            symbol: {
63
              type: "mesh-3d",
64
              symbolLayers: [
65
                {
66
                  type: "fill",
67
                  material: { color: "#7EB0D5", colorMixMode: "replace" },
68
                },
69
              ],
70
            },
71
            label: "Residential",
72
          },
73
          {
74
            value: "MIXRES",
75
            symbol: {
76
              type: "mesh-3d",
77
              symbolLayers: [
78
                {
79
                  type: "fill",
80
                  material: { color: "#BD7EBE", colorMixMode: "replace" },
81
                },
82
              ],
83
            },
84
            label: "Mixed use",
85
          },
86
          {
87
            value: "MIXED",
88
            symbol: {
89
              type: "mesh-3d",
90
              symbolLayers: [
91
                {
92
                  type: "fill",
93
                  material: { color: "#B2E061", colorMixMode: "replace" },
94
                },
95
              ],
96
            },
97
            label: "Mixed use without residential",
98
          },
99
        ],
100
      };
38 collapsed lines
101

102

103
      // Set the renderer on the layer
104
      const buildingLayer = new SceneLayer({
105
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/SF_BLDG_WSL1/SceneServer/0",
106
        renderer: typeRenderer,
107
        title: "San Francisco Buildings",
108
      });
109

110
      // Add the layer to the map
111
      const map = new Map({
112
        basemap: "gray-vector",
113
        layers: [buildingLayer],
114
      });
115

116
      const view = new SceneView({
117
        container: "viewDiv",
118
        map,
119
        camera: {
120
          position: [-122.3966368, 37.77924265, 1294.5539],
121
          heading: 346.67,
122
          tilt: 46.8,
123
        },
124
      });
125

126
      view.ui.add(
127
        new Legend({
128
          view,
129
        }),
130
        "top-right",
131
      );
132
    </script>
133
  </head>
134

135
  <body>
136
    <div id="viewDiv"></div>
137
  </body>
138
</html>

API support

	3D	Lines	Polygons	Mesh
Unique types
Class breaks
Visual variables				¹
Time
Multivariate
Predominance
Dot density
Charts
Relationship
Smart Mapping	²	³	³	³

Full SupportPartial SupportNo Support

Color only
Size variable creators only supported for points
Size variable creators not supported in 3D

Data-driven stylesIntroduction Data-driven stylesClass breaks

What is a unique types style?

How a unique types style works

Examples

Categorical data

Points of interest (3D)

Ordinal data

Categorical data (3D)

Steps

Related samples and resources

Visualize features by type

Generate data-driven visualization of unique values

Coloring options for textured buildings

Extrude building footprints based on real world heights

Create a custom visualization using Arcade

API support