Clusters as pie charts

This sample demonstrates how to represent clusters as pie charts. This is done by calling the createRendererForClustering method in the pieChart smart mapping module.

This method returns a list of aggregate fields and a renderer. Both of these objects must be set on the FeatureReductionCluster object for the charts to properly render.

Configure clustering
Use dark colors for code blocks
75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 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 143 143 143 143 143 143 143 143 143 143 143 143 143 143 143 143 143 143 143 143 143 143 143 143 143 143 143 143 143
Add line.Add line.
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
          async function generateClusterConfig(layer){
            // generates default labelingInfo
            const { labelingInfo, clusterMinSize } = await clusterLabelCreator
              .getLabelSchemes({ layer, view })
              .then(labelSchemes => labelSchemes.primaryScheme );

            const labelSymbol = labelingInfo[0].symbol;
            labelSymbol.color = labelSymbol.haloColor.clone();
            labelSymbol.haloColor = [255,255,255,0.3];
            labelSymbol.font.size = 10;


            const { renderer, fields } = await pieChartRendererCreator
              .createRendererForClustering({
                layer,
                shape: "donut"
              });

            renderer.holePercentage = 0.66;

            const fieldInfos = fields.map( field => {
              return {
                fieldName: field.name,
                label: field.alias,
                format: {
                  places: 0,
                  digitSeparator: true
                }
              }
            });

            // maps the field names for the popup chart
            const fieldNames = fieldInfos.map(field => {
              return field.fieldName
            });

            const popupTemplate = {
              content: [{
                type: "text",
                text: "This cluster represents <b>{cluster_count}</b> features."
              },
              {
                type: "media",
                mediaInfos: [{
                  title: "311 Reports",
                  type: "pie-chart",
                  value: {
                    fields: fieldNames
                  }
                }]
              },
              {
                type: "fields"
              }],
              fieldInfos
            };

            return {
              type: "cluster",
              popupTemplate,
              labelingInfo,
              clusterMinSize,

              fields,
              renderer

            };
          }

Clustering is enabled via the featureReduction property of the FeatureLayer.

Set generated cluster configuration
Use dark colors for code blocksCopy
64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 64 65 66 67 68 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69
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
          layer.when()
            .then(generateClusterConfig)
            .then((featureReduction) => {

              layer.featureReduction = featureReduction;

Clustering is a method of aggregating points in a FeatureLayer, CSVLayer, GeoJSONLayer, WFSLayer, or OGCFeatureLayer by grouping them in clusters defined by screen space.

Image preview of related sample Intro to clustering

Intro to clustering

Intro to clustering

Image preview of related sample Override cluster symbol

Override cluster symbol

Override cluster symbol

Image preview of related sample Cluster size based on the sum of a field

Cluster size based on the sum of a field

Cluster size based on the sum of a field

Image preview of related sample Clustering - query clusters

Clustering - query clusters

Clustering - query clusters

Image preview of related sample Clustering - advanced configuration

Clustering - advanced configuration

Clustering - advanced configuration

Image preview of related sample Popup charts for point clusters

Popup charts for point clusters

This sample demonstrates how to summarize clustered features using charts within a cluster's popup.

FeatureReductionCluster

Read the API Reference for more information.

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