Simple styles

What are simple styles?

A simple style is 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. The visual properties are defined by a symbolA symbol defines the properties used to display a geometry or text.Learn more and a simple rendererA simple renderer is a renderer that defines a single symbol used to display all features in a layer.Learn more. When a feature layer is displayed in a map, all featuresA feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes.Learn more are treated and displayed equally. A simple style just shows the location of a feature and the visual properties are not determined by the attributes or data values associated with it.

You use simple styles when you want to:

• Style all features (points, lines, and polygons) the same
• Style features based on their location
• Create a uniform visualization for all features
• Not emphasize or deemphasize features
• Not use a data-driven approach to visualize features

How to create a simple style

In general, there are two ways to style featuresA feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes.Learn more:

1. Apply symbols to graphics: You use this approach when you need to display the location for temporary graphicsA graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene.Learn more in a mapA map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers.Learn more or sceneA scene is a collection of layers that are displayed in 3D. It is typically composed of a basemap layer, data layers, and 3D data.Learn more. The symbolA symbol defines the properties used to display a geometry or text.Learn more type must match the geometryA geometry is a geometric shape, such as a point, polyline, or polygon, that contains one or more coordinates and a spatial reference.Learn more type of the graphic. Learn more about how to create graphics in Graphics.

2. Apply a renderer (with symbols) to a data layer: You use this approach when you want to style all featuresA feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes.Learn more in a data layer in a mapA map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers.Learn more or sceneA scene is a collection of layers that are displayed in 3D. It is typically composed of a basemap layer, data layers, and 3D data.Learn more. A rendererA renderer is a collection of rules and symbols used to display the data in a layer.Learn more defines the "rules" for applying symbolsA symbol defines the properties used to display a geometry or text.Learn more to features, and the symbols define the style used to display the feature. Learn more about layers that support features in Data layers.

Symbols

There are many different types of symbolsA symbol defines the properties used to display a geometry or text.Learn more you can use to style featuresA feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes.Learn more. The type of symbol you use depends on the type of visualization you would like to create. It also depends on the type of geometryA geometry is a geometric shape, such as a point, polyline, or polygon, that contains one or more coordinates and a spatial reference.Learn more the feature supports. 2D symbols are used to display features in a mapA map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers.Learn more, and 3D symbols are used to display features in a sceneA scene is a collection of layers that are displayed in 3D. It is typically composed of a basemap layer, data layers, and 3D data.Learn more. The most common type of symbol is a simple symbolSimple symbols are symbols that follow the web map specification. Developers can create and work with them through the simple symbol classes.Learn more.

2D Symbols

You use 2D symbols to style point, line, and polygon geometries and display them in a mapA map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers.Learn more. The main types are marker, picture, and text symbols. See below for more examples.

1
2
3
4
5
6
7
8
const symbol = new SimpleMarkerSymbol({
  color: "rgba(0,128,155,0.8)",
  size: "10px",
  outline: new SimpleLineSymbol({
    width: 0.5,
    color: "rgba(255,255,255,0.3)"
  })
});

3D Symbols

You use 3D symbols to style point, line, polygon, and mesh geometries and display them in a sceneA scene is a collection of layers that are displayed in 3D. It is typically composed of a basemap layer, data layers, and 3D data.Learn more. In a scene, you can choose between two types of symbols:

• 2D symbols such as marker symbols, line symbols and polygon fill symbols.
• 3D symbols such as 3D model symbols, path symbols and extruded polygon symbols.

See below for more examples.

1
2
3
4
5
6
7
8
9
10
const pointSymbol = new PointSymbol3D({
  symbolLayers: [ new IconSymbol3DLayer({
    resource: { href: "pin.svg" },
    size: 15,
    material: {
      color: "#4c397f"
    },
    anchor: "bottom"
  })]
});

Simple renderer

The most common type of rendererA renderer is a collection of rules and symbols used to display the data in a layer.Learn more is a simple rendererA simple renderer is a renderer that defines a single symbol used to display all features in a layer.Learn more. You use a simple renderer to style all of the featuresA feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes.Learn more in a data layerA data layer is a layer that references geographic data from a file or a service and is used to visualize the data in a map or scene.Learn more the same. Using a simple renderer, all visual properties of the symbol (e.g. size, color, opacity, texture, etc.) are fixed for each feature. The primary purpose of the visualization is to show where a feature is located, not specifics about the feature's attributes. For example, if you want to know the locations of weather stations, but you do not need to know additional attribute information about each station, you should render all points with the same symbol.

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
      const renderer = new SimpleRenderer({
        symbol: new SimpleMarkerSymbol({
          size: 4,
          color: [0, 255, 255],
          outline: null,
        }),
      });

2D examples

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
      const renderer = new SimpleRenderer({
        symbol: new SimpleMarkerSymbol({
          size: 4,
          color: [0, 255, 255],
          outline: null,
        }),
      });

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
      const renderer = new SimpleRenderer({
        symbol: new SimpleLineSymbol({
          width: 1,
          color: "#fb12ff",
        }),
      });

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
      const renderer = new SimpleRenderer({
        symbol: new SimpleFillSymbol({
          color: "rgba(249, 249, 199, .05)",
          outline: {
            color: "white",
            width: 0.15,
          },
        }),
      });

3D examples

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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
      const renderer = new SimpleRenderer({
        symbol: new PointSymbol3D({
          symbolLayers: [
            new IconSymbol3DLayer({
              resource: {
                href: "https://static.arcgis.com/arcgis/styleItems/Icons/web/resource/Pushpin3.svg",
              },
              size: 15,
              material: {
                color: "#4c397f",
              },
              anchor: "bottom",
            }),
          ],
        }),
      });

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
      const renderer = new SimpleRenderer({
        symbol: new LineSymbol3D({
          symbolLayers: [
            new PathSymbol3DLayer({
              profile: "quad",
              material: {
                color: [46, 255, 238],
              },
              width: 10,
              height: 10,
              join: "miter",
              cap: "round",
              anchor: "bottom",
              profileRotation: "all",
            }),
          ],
        }),
      });

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
      const renderer = new SimpleRenderer({
        symbol: new PolygonSymbol3D({
          symbolLayers: [
            new ExtrudeSymbol3DLayer({
              material: {
                color: "#ffc53d",
              },
              size: 10,
              edges: {
                type: "solid",
                color: "#a67400",
                size: 1.5,
              },
            }),
          ],
        }),
      });

Tutorials

Style a feature layer

Use symbols and renderers to style feature layers.

JavaScript Maps SDKKotlin Maps SDKSwift Maps SDK.NET Maps SDKJava Maps SDKQt Maps SDKLeafletMapLibre GL JSOpenLayersCesiumJS

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