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.

StyleDescriptionExample
2D symbolsTo style point, line, and polygon geometries in a map. 2d points
3D symbolsTo style point, line, and polygon geometries in a scene. 3d polygons

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:

  1. Create and define symbols.
  2. Create the renderer.
  3. 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
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
        const renderer = new SimpleRenderer({
          symbol: new SimpleMarkerSymbol({
            size: 4,
            color: [0, 255, 255],
            outline: null
          })
        });

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:

  1. Reference the feature layer by using a service URL or its item ID.
  2. Set the renderer property of the layer.
  3. 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
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
        //Set the renderer on the layer
        const weatherStations = new FeatureLayer({
          portalItem: {
            id: "cb1886ff0a9d4156ba4d2fadd7e8a139"
          },
          renderer: renderer
        });
Expand

Additional resources

Tutorials

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

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