How to build a data visualization app

1. Choose a style

The first step is to determine which type of style to use. If you want to display a single symbol for all features, use a simple style. If you want to display different symbols for features based on attributes, use a data-driven style. The most common styles are listed below.

Simple styles are a single set of visual properties applied to all features in a feature layer.

Style	Description	Example
2D symbols	To style point, line, and polygon geometries in a map.
3D symbols	To style point, line, and polygon geometries in a scene.

A unique type style assigns distinct symbols to unique data values returned from a field or expression in a layer.

Style	Description	Example
Categorical data (2D)	Visualize data based on a category such as region or type.
Categorical data (3D)	Visualize data based on a category such as region or type in a scene.
Ordinal data	Visualize ordinal data such as high, medium, and low.

A class breaks style allows you to visualize numeric ranges of data.

Style	Description	Example
Attributes	Visualize a range of numeric data values normalized by another attribute.
Area	Visualize a range of values normalized by the area of a polygon.

Visual variables are objects that allow you to override one or more properties of a renderer's symbols based on a numeric data value returned from a field or an expression.

Style	Description	Example
Color	Visualize the color of a symbol based on a numeric data value returned from a field or expression.
Size	Visualize the size of a symbol based on a numeric data value returned from a field or expression.
Opacity	Visualize the opacity of a symbol based on a numeric data value returned from a field or expression.
Rotation	Visualize the rotation of a symbol based on a numeric data value returned from a field or expression.

2. Define the symbols and renderer

The next step is to define one or more symbols and a renderer with an ArcGIS Maps SDK. Each symbol contains a unique set of style properties. Typical properties are color, size, fill color, outline size and color, and transparency. A renderer is responsible for assigning each feature a symbol. A simple renderer defines one symbol for all features. Data-driven renderers define multiple symbols that are assigned to features based on attribute values.

The steps to define the style are:

Create and define symbols.
Create the renderer.
Set the symbols to the renderer.

This example illustrates how to create 2D point symbols and define a simple renderer using ArcGIS Maps SDKs.

ArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for .NETArcGIS Maps SDK for JavaArcGIS Maps SDK for SwiftArcGIS Maps SDK for Qt (C++)
Use dark colors for code blocksCopy
        const renderer = new SimpleRenderer({
          symbol: new SimpleMarkerSymbol({
            size: 4,
            color: [0, 255, 255],
            outline: null
          })
        });

This example illustrates how to style categorical data with a unique value renderer using ArcGIS Maps SDKs.

ArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for .NETArcGIS Maps SDK for JavaArcGIS Maps SDK for SwiftArcGIS Maps SDK for Qt (C++)

Use dark colors for code blocks

Copy

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
        const hwyRenderer = {
          type: "unique-value",
          legendOptions: {
            title: "Freeway 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 State highways
              symbol: stateSym,
              label: "State Highway",
            },
          ],
        }

Go to tutorial

This example illustrates how to style data by attribute with a class breaks renderer using ArcGIS Maps SDKs.

ArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for .NETArcGIS Maps SDK for JavaArcGIS Maps SDK for SwiftArcGIS Maps SDK for Qt (C++)

Use dark colors for code blocks

Copy

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
        const renderer = {
          type: "class-breaks",
          field: "NOHS_CY",
          normalizationField: "EDUCBASECY",
          legendOptions: {
            title: "% of adults with no high school education"
          },
          defaultSymbol: {
            type: "simple-fill",
            color: "black",
            style: "backward-diagonal",
            outline: {
              width: 0.5,
              color: [50, 50, 50, 0.6]
            }
          },
          defaultLabel: "no data",
          classBreakInfos: [
            {
              minValue: 0,
              maxValue: 0.04999,
              symbol: createSymbol("#edf8fb"),
              label: "< 5%"
            },
            {
              minValue: 0.05,
              maxValue: 0.14999,
              symbol: createSymbol("#b3cde3"),
              label: "5 - 15%"
            },
            {
              minValue: 0.15,
              maxValue: 0.24999,
              symbol: createSymbol("#8c96c6"),
              label: "15 - 25%"
            },
            {
              minValue: 0.25,
              maxValue: 1.0,
              symbol: createSymbol("#88419d"),
              label: "> 25%"
            }
          ]
        };

Go to tutorial

This example illustrates how to style by color based on numeric data values using visual variables in the renderer with the JavaScript Maps SDK.

ArcGIS Maps SDK for JavaScript

Use dark colors for code blocks

Copy

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
        const renderer = {
          type: "simple",
          symbol: {
            type: "simple-marker",
            style: "circle",
            color: [250, 250, 250],
            outline: {
              color: [255, 255, 255, 0.5],
              width: 0.5
            },
            size: "8px"
          },

          visualVariables: [
            {
              type: "color",
              field: "TEMP",
              stops: [
                { value: 20, color: "#2b83ba" },
                { value: 35, color: "#abdda4" },
                { value: 50, color: "#ffffbf" },
                { value: 65, color: "#fdae61" },
                { value: 80, color: "#d7191c" }
              ]
            }
          ]

        };

Go to tutorial

3. Display the style

The last step is to use an ArcGIS Maps SDK to access and display the features on a map.

The steps to display the style are:

Reference the feature layer by using a service URL or its item ID.
Set the renderer property of the layer.
Add the layer to the map.

ArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for .NETArcGIS Maps SDK for JavaArcGIS Maps SDK for SwiftArcGIS Maps SDK for Qt (C++)
Expand
Use dark colors for code blocksCopy
        //Set the renderer on the layer
        const weatherStations = new FeatureLayer({
          portalItem: {
            id: "cb1886ff0a9d4156ba4d2fadd7e8a139"
          },
          renderer: renderer
        });
Expand

ArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for .NETArcGIS Maps SDK for JavaArcGIS Maps SDK for SwiftArcGIS Maps SDK for Qt (C++)

Expand
Use dark colors for code blocksCopy

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
        // Set the renderer on the layer
        const hwyLayer = new FeatureLayer({
          url:
            "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/TIGER_Roads_2021_view/FeatureServer/0",
          renderer: hwyRenderer,
          title: "USA Freeway System",
          minScale: 0,
          maxScale: 0,
          definitionExpression: "MTFC = 'Primary Road'",
          orderBy: [
            {
              valueExpression: `
              Decode( $feature.RTTYP,
                "I", 1,
                "U", 2,
                "S", 3,
                "M", 4,
              100 );
            `,
              order: "ascending",
            },
          ],
        })

Expand

Go to tutorial

ArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for .NETArcGIS Maps SDK for JavaArcGIS Maps SDK for SwiftArcGIS Maps SDK for Qt (C++)

Expand
Use dark colors for code blocksCopy

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
      // Set the renderer of the feature layer
        const layer = new FeatureLayer({
          portalItem: {
            id: "1cbb0faa0f1f424bbe213bfae9319309"
          },
          title: "Census tracts",
          renderer: renderer,
          popupTemplate: {
            content: "{NOHS_CY} adults 25 years old and older in this census tract did not attend high school."
          },
          opacity: 1
        });

Expand

Go to tutorial

ArcGIS Maps SDK for JavaScript

Expand
Use dark colors for code blocksCopy

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
        // Set the renderer on the feature layer
        const layer = new FeatureLayer({
          portalItem: {
            id: "cb1886ff0a9d4156ba4d2fadd7e8a139"
          },
          title: "Current weather conditions",
          renderer: renderer
        });

        const map = new Map({
          basemap: {
            portalItem: {
              id: "ba223f982a3c4a0ea8c9953346e2a201"
            }
          },
          layers: [layer]
        });

Expand

Go to tutorial

Additional resources

Tutorials

Style a feature layer

Use symbols and renderers to style feature layers.

JavaScript Maps SDK Kotlin Maps SDK .NET Maps SDK Java Maps SDK Qt Maps SDK Esri Leaflet MapLibre GL JS OpenLayers CesiumJS

Style layers in a web map

Use Map Viewer to style layers in a web map.

Map Viewer

Style layers in a web scene

Use Scene Viewer to style layers in a web scene.

Scene Viewer

Workflows

Create a feature service for an app

Learn how to import parcel data, create and style a feature layer, and then access the features in an app.