Visualize features by type

Explore in the sandboxView live

This sample demonstrates how to symbolize features 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:

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.

Define unique symbols
Use dark colors for code blocksCopy
37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
        const colors = ["#d92b30", "#3cccb4", "#ffdf3c", "#c27c30", "#f260a1"];

        const commonProperties = {
          type: "simple-line",
          width: "4px",
          style: "solid"
        };

        // Symbol for Interstate highways
        const fwySym = {
          ...commonProperties,
          color: colors[0]
        };

        // Symbol for U.S. Highways
        const hwySym = {
          ...commonProperties,
          color: colors[1]
        };

        // Symbol for state highways
        const stateSym = {
          ...commonProperties,
          color: colors[2]
        };

        // Symbol for other major highways
        const majorSym = {
          ...commonProperties,
          color: colors[3]
        };

        // Symbol for other major highways
        const otherSym = {
          ...commonProperties,
          color: colors[4]
        };

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: RTTYP (i.e. Route Type).

Use dark colors for code blocksCopy
    
1
2
3
4
const hwyRenderer = {
  type: "unique-value", // autocasts as new UniqueValueRenderer()
  field: "RTTYP",
};

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...

Define aggregate fields
Use dark colors for code blocksCopy
86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
        const hwyRenderer = {
          type: "unique-value", // autocasts as new UniqueValueRenderer()
          legendOptions: {
            title: "Route type"
          },
          defaultSymbol: otherSym,
          defaultLabel: "Other",
          field: "RTTYP",

          uniqueValueInfos: [
            {
              value: "I", // code for interstates/freeways
              symbol: fwySym,
              label: "Interstate"
            },
            {
              value: "U", // code for U.S. highways
              symbol: hwySym,
              label: "US Highway"
            },
            {
              value: "S", // code for U.S. highways
              symbol: stateSym,
              label: "State Highway"
            },
            {
              value: "M", // code for U.S. highways
              symbol: majorSym,
              label: "Major road"
            }
          ]

        };

Or with the addUniqueValueInfo() method.

Use dark colors for code blocksCopy
 
1
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.

Explore in the sandboxView live

5. Additional visualization tutorials and samples

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