Client-side StreamLayer

Explore in the sandboxView live

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 type	Message parameters	Message explanation
features	`features: 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
        // 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
          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);

StreamLayer

client-side

ArcGIS Maps SDK for JavaScriptSample Code

Client-side StreamLayer

Was this page helpful?