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 send 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 | 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:
// 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 send method with features message as shown below:
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);