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 for all features, use a simple style. If you want to display different symbols for features based on , 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 .

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 and a with an . 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 .
  2. Create the .
  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
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 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 .
  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
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.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close