Client-side StreamLayer

This sample shows how to add a client-side StreamLayer to your map and start streaming features to it by calling its sendMessageToClient() method.

Since the StreamLayer requires a schema, several properties need to be set when creating a layer purely on the client-side. The geometry type of the features must be indicated by setting the geometryType property. The StreamLayer requires an objectId field along with an array of field objects, providing the schema of each field. Each field schema in the fields array should match the feature attributes being streamed to the layer to ensure data accuracy. The StreamLayer also requires the trackIdField to be set in the layer's timeInfo property and the field schema must exist in the fields array.

The sendMessageToClient() can be called once the layer is successfully initialized and added to the map. There are three predefined client-side only message types you can send to the layer: features, delete, and clear. This sample uses features message to instruct the layer to start streaming features. The following table explains this message.

Message typeMessage parametersMessage explanation
featuresfeatures: Feature[]Adds features from features array to a stream layer on client. Features are esri Feature JSON object.

How it works

When the application starts, a client-side StreamLayer is initialized with the following parameters:

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
        // Create a client-side stream layer by setting its
        // required properties and additional desired properties
        const layer = new StreamLayer({
          // field schemas in the fields array should match the
          // feature attributes that will stream to the layer.
          // set the objectIdField and trackIdField in the fields
          fields: [
            {
              name: "OBJECTID",
              alias: "OBJECTID",
              type: "oid",
            },
            {
              name: "TRACKID",
              alias: "TrackId",
              type: "long",
            },
            {
              name: "STATUS",
              alias: "STATUS",
              type: "string",
            }
          ],
          // trackIdField is required and the field schema must exist
          // in the fields array
          timeInfo: {
            trackIdField: "TRACKID"
          },
          updateInterval: 100,
          geometryType: "polygon", // required property
          spatialReference: {
            wkid: 102100
          },
          popupTemplate: {
            title: "Status: {STATUS}",
            content: "trackId: {TRACKID}, objectId: {OBJECTID}"
          },
          labelingInfo: [
            {
              symbol: {
                type: "text",
                color: "black"
              },
              labelPlacement: "always-horizontal",
              labelExpressionInfo: {
                expression: "$feature.STATUS"
              }
            }
          ],
          // set unique value renderer based on the status field
          renderer: {
            type: "unique-value",
            field: "STATUS",
            uniqueValueInfos: [
              {
                value: "blocked",
                symbol: {
                  type: "simple-fill",
                  color: [233, 116, 81, 0.5],
                  outline: {
                    width: 1,
                    color: "white"
                  }
                }
              },
              {
                value: "open",
                symbol: {
                  type: "simple-fill",
                    color: [34, 139, 34, 0.5],
                    outline: {
                    width: 1,
                    color: "white"
                  }
                }
              },
              {
                value: "unknown",
                  symbol: {
                  type: "simple-fill",
                    color: [255, 191, 0, 0.5],
                    outline: {
                    width: 1,
                    color: "white"
                  }
                }
              }
            ]
          },
        });

Then you can start streaming features to the layer by calling its sendMessageToClient method with features message as shown below:

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
          let objectIdCounter = 0;
          // call sendMessageToClient method every 1 second
          // to stream new features with different attributes
          setInterval(() => {
            // start streaming features to the stream layer
            // update the status attribute values
            // you must stream new features with different attributes
            layer.sendMessageToClient({
              type: "features",
              features: [
                {
                  attributes: {
                    TRACKID: 1,
                    OBJECTID: objectIdCounter++,
                    STATUS: status[Math.floor(Math.random()*status.length)],
                  },
                  geometry: {
                    rings: [[
                    [-13180792.01151011, 4037145.9303959487],
                    [-13180509.058277348, 4037145.9303959487],
                    [-13180509.058277348, 4036824.2921144445],
                    [-13180792.01151011, 4036824.2921144445],
                    [-13180792.01151011, 4037145.9303959487]
                    ]]
                  }
                },
                {
                  attributes: {
                    TRACKID: 2,
                    OBJECTID: objectIdCounter++,
                    STATUS: status[Math.floor(Math.random()*status.length)],
                  },
                  geometry: {
                    rings: [[
                      [-13180458.980453761, 4036356.2739379476],
                      [-13180207.564959718, 4036356.2739379476],
                      [-13180207.564959718, 4036190.056991914],
                      [-13180458.980453761, 4036190.056991914],
                      [-13180458.980453761, 4036356.2739379476]
                    ]]
                  }
                },
                {
                  attributes: {
                    TRACKID: 3,
                    OBJECTID: objectIdCounter++,
                    STATUS: status[Math.floor(Math.random()*status.length)],
                  },
                  geometry: {
                    rings: [[
                      [-13179890.918598393, 4036915.303683526],
                      [-13179661.411569001, 4036915.303683526],
                      [-13179661.411569001, 4036673.041598266],
                      [-13179890.918598393, 4036673.041598266],
                      [-13179890.918598393, 4036915.303683526]
                    ]]
                  }
                }
              ]
            });
          }, 1000);

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