How to build a data visualization app | Documentation

1. Choose a style

The first step is to determine which type of style to use. If you want to display a single symbolA symbol defines the properties used to display a geometry or text.Learn more for all features, use a simple style. If you want to display different symbols for features based on attributesAttributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service.Learn more, 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 layerA feature layer (client-side) is a data layer that can access and display features from a feature service that has the same type of geometry and attribute fields.Learn more.

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 symbolsA symbol defines the properties used to display a geometry or text.Learn more and a rendererA renderer is a collection of rules and symbols used to display the data in a layer.Learn more with an ArcGIS Maps SDKArcGIS Maps SDKs are developer products for building mapping and spatial analysis applications for web browsers, native devices, and game engines.Learn more. 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 symbolsA symbol defines the properties used to display a geometry or text.Learn more.
Create the rendererA renderer is a collection of rules and symbols used to display the data in a layer.Learn more.
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 JavaScript

ArcGIS Maps SDK for .NET

ArcGIS Maps SDK for Java

ArcGIS Maps SDK for Swift

ArcGIS Maps SDK for Qt

ArcGIS Maps SDK for Flutter

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 JavaScript

ArcGIS Maps SDK for .NET

ArcGIS Maps SDK for Java

ArcGIS Maps SDK for Swift

ArcGIS Maps SDK for Qt

ArcGIS Maps SDK for Flutter

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
      const hwyRenderer = {
        type: "unique-value",
        legendOptions: {
          title: "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 JavaScript

ArcGIS Maps SDK for .NET

ArcGIS Maps SDK for Java

ArcGIS Maps SDK for Swift

ArcGIS Maps SDK for Qt

ArcGIS Maps SDK for Flutter

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
      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
      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 SDKArcGIS Maps SDKs are developer products for building mapping and spatial analysis applications for web browsers, native devices, and game engines.Learn more 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 IDAn item ID is a unique identifier representing a single item stored, managed, and accessed in a portal, such as a web map, hosted layer, or file.Learn more.
Set the renderer property of the layer.
Add the layer to the map.

ArcGIS Maps SDK for JavaScript

ArcGIS Maps SDK for .NET

ArcGIS Maps SDK for Java

ArcGIS Maps SDK for Swift

ArcGIS Maps SDK for Qt

ArcGIS Maps SDK for Flutter

Expand
Use dark colors for code blocksCopy
      //Set the renderer on the layer
      const citiesLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/USA_Major_Cities_/FeatureServer/0",
        renderer: new SimpleRenderer({
          symbol: new SimpleMarkerSymbol({
            size: 2,
            color: [0, 255, 255],
            outline: null,
          }),
        }),
      });
Expand

ArcGIS Maps SDK for JavaScript

ArcGIS Maps SDK for .NET

ArcGIS Maps SDK for Java

ArcGIS Maps SDK for Swift

ArcGIS Maps SDK for Qt

ArcGIS Maps SDK for Flutter

Expand

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

Expand

Go to tutorial

ArcGIS Maps SDK for JavaScript

ArcGIS Maps SDK for .NET

ArcGIS Maps SDK for Java

ArcGIS Maps SDK for Swift

ArcGIS Maps SDK for Qt

ArcGIS Maps SDK for Flutter

Expand

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
      // 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 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
      // 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],
      });