Symbols, renderers, and styles

A symbol defines display properties for features and graphics, which are types of geoelements. A geoelement has a geometry (location and shape) and optional attributes. Features and graphics also use a symbol to define display characteristics such as color, size, border, transparency, and so on. It's important to remember, therefore, that a symbol is not the item being represented on the map. Instead, a symbol controls how those items (graphics or features) appear. The relationship is similar, for example, between the words you are reading now (the content) and the font that is used to display them (presentation). Changing the font style, size, and color will not change the meaning of the text but is likely to have an impact on the effectiveness of the presentation. Likewise, the quality of a map's presentation can improve with the proper use of symbols to convey information. Sometimes, the symbol used by a feature or graphic is contained in a renderer.

A renderer is a collection of one or more symbols. When applied to a layer or graphics overlay, a renderer displays geoelements using the appropriate symbol. If it contains more than a single symbol, a renderer uses logic to determine the symbol to apply to each geoelement, based on one or several attribute values. A set of raster renderers are provided to display rasters according to their cell values.

Some layer types don't support symbols or renderers, such as WMS and vector tile layers. These layers provide styles as an alternative method for changing how features are displayed. As with symbols and renderers, styles determine how a layer's content is presented.

Symbols

For features and graphics to appear on a map, they must be assigned a symbol. There are a variety of symbol types you can create to display them, with properties such as color, size, and symbol style that you can modify. While each symbol type requires a specific geometry type (point, line, or polygon), you are not restricted to use those symbols exclusively for a given geometry. If you're symbolizing a line, for example, you can choose to use a marker symbol to display the line's vertices (points). Also, symbols may have different capabilities when used in 2D (map) or 3D (scene).

simple symbols

The following symbols models are available:

  • Simple symbols follow the web map specification. You can create these using the simple symbology API, or get them from web maps and feature services when advanced symbology is turned off.

  • Advanced symbols follow the ArcGIS Pro symbol model. You can create these using the multilayer symbol classes, or get them from feature services, mobile style files, dictionary renderers, and mobile map packages.

When authoring maps in ArcGIS Pro, you can choose to use symbology compatible with all clients or to use advanced symbology. The ArcGIS Online Map Viewer and apps built with this SDK are capable of rendering advanced symbology. The ArcGIS Online Map Viewer classic uses downgraded symbology when rendering advanced symbols.

You should use advanced symbols via multilayer symbols APIs or style files (.stylx) created from ArcGIS Pro. Advanced symbols, also known as Cartographic Information Model (CIM) symbols, are vectorized representations that scale well and perform better than simple symbols. ArcGIS is moving towards full support for advanced symbols, they are now supported by the ArcGIS Maps SDK for JavaScript and in the ArcGIS Online Map Viewer. In instances where advanced symbols do not render as expected in a particular context, you can use simple symbols.

A SimpleFillSymbol that uses a SimpleLineSymbol to define its outline:

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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
val simpleLineSymbol = SimpleLineSymbol(
    style = SimpleLineSymbolStyle.Solid,
    color = Color.white,
    width = 0.15f
)

val simpleFillSymbol = SimpleFillSymbol(
    style = SimpleFillSymbolStyle.Solid,
    color = Color.red,
    outline = simpleLineSymbol
)

A SimpleMarkerSceneSymbol used to define a 3D symbol for display in a ArcGISScene:

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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
val sceneSymbol = SimpleMarkerSceneSymbol(
    style = SimpleMarkerSceneSymbolStyle.Cylinder,
    color = Color.red,
    height = 50.0,
    width = 10.0,
    depth = 10.0,
    anchorPosition = SceneSymbolAnchorPosition.Bottom
)

Renderers

A renderer contains a set of symbols and controls how data in a layer (or graphics overlay) are displayed. Renderers use data values (from an attribute or raster cell) to determine the symbol to apply. There are a variety of renderer types, some for feature layers and graphics overlays and some for rasters, each designed to use a different rendering logic.

Renderers are always used to symbolize feature or raster layers, since symbols cannot be applied directly to that data. A renderer can also be applied to a graphics overlay but may not be appropriate if the overlay has graphics of mixed geometry types. For such a scenario, applying the appropriate symbol directly to each graphic may be the preferred workflow.

Renderers can be updated at run time, allowing your user to dynamically visualize data in the map.

The following are the types of renderers available for feature layers and graphics overlays:

  • Simple — A simple renderer displays all features in a layer or graphics overlay using the same symbol. For example, display all points in the world cities layer as a small red square.
  • Unique value — Applies a unique symbol for each specified value of an attribute (or combination of attributes). A unique value renderer can be based on any data type but is typically used with string attributes. For example, display points in the world cities layer using two symbols: a small gray triangle for features with a value of N for the CAPITAL attribute and a large yellow star for those with a value of Y.
  • Class breaks — Symbolizes features or graphics according to specific ranges of values for an attribute. The attribute used for a class breaks renderer must be numeric. For example, display world city POPULATION value with three different symbols based on size range: a small blue circle for cities with a value between 0 and 100000, a slightly larger blue circle for cities with a value between 100001 and 2999999, and a larger blue circle for cities with a value over 3000000.
  • Dictionary — Renders features or graphics by constructing multilayer symbols from a style file and associated attribute values. A dictionary renderer is commonly used to display military symbology. See the Display symbols with a dictionary renderer topic for details.

The following image shows a layer with a class breaks renderer. The renderer displays features as five classes of population, each with a different symbol (a darker or lighter shade of red).

class breaks renderer

The following raster renderers are available to control how raster data is presented.

  • Hillshade — Creates a grayscale 3D representation of an elevation surface, with the sun's (hypothetical) position taken into account for shading the image. It can be applied to a raster layer created with single-band raster data.
  • Blend — Blends a hillshade image (derived from the raster) with the original raster. This provides a look similar to the original raster but with some terrain shading, for a rich, textured look.
  • Colormap — Provides a discrete mapping of raster pixel values to colors. All pixels matching the specified value are rendered using the mapped color. This can be useful for tasks such as land classification.
  • Stretch — Displays continuous raster cell values across a gradual ramp of colors. Use the stretch renderer to draw a single band of continuous data. The stretch renderer works well when you have a large range of values to display, such as in imagery, aerial photographs, or elevation models.
  • RGB — Uses the same methods as the stretch renderer but allows you to combine bands as red, green, and blue composites.
raster hillshade renderer

A SimpleRenderer that uses a SimpleMarkerSymbol for displaying all features. This renderer could be applied to a FeatureLayer or GraphicsOverlay:

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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
val simpleMarkerSymbol = SimpleMarkerSymbol(
    style = SimpleMarkerSymbolStyle.Triangle,
    color = Color.red,
    size = 10f
)
val simpleRenderer = SimpleRenderer(simpleMarkerSymbol)
featureLayer.renderer = simpleRenderer

Styles

Some layers that do not support symbols and renderers, such as ArcGIS vector tile layers and WMS, offer styles as a method of controlling how you display the features they contain. These layers use a default style and provide the option to apply other available styles.

ArcGIS vector tile layer styles

An ArcGIS vector tile layer consumes vector tiles and an associated style for drawing them. Because the style is separate from the underlying data, you can customize the style of an existing basemap layer. There are layers with many styles available through ArcGIS Online. See Creative Vector Tile Layers and Web Maps for some examples.

vector map styles

You can create your own style with the ArcGIS Vector Tile Style Editor. Your customized vector layers can then be saved to and read from ArcGIS Online.

WMS styles

WMS servers provide clients with a list of supported styles for each layer. At run time, you can choose the style the WMS server uses to render map images. In general, styles are predefined and cannot be changed or added to.

The styles defined in the layer information can be inspected to determine the styles (if any) that are available. The style of a WMS sublayer can be set to one of the available styles.

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