How create symbology on stream layer
Sebastien,
When you publish a Stream Service you can specify an ArcGIS Server service layer that contains related features. The use case that this addresses is where the geographic location of your data does not change, but data attributes change. It sounds like your traffic light data works like this.
To publish a Stream Service that references a map/feature service containing location data, you specify the url to the map or feature service layer in the "Related Features" text box of the "Publish Stream Service" dialog. The image below shows using the first layer of a map service named Gages:
When the JavaScript API Stream Layer is added to a map, it will first query the "Related Features" url to get the locations of the data. Then when a message is received from the stream service, it finds the feature that has the same Track_ID as the incoming message and updates the attributes of the existing feature with the attributes contained in the new message. To use the related features capability, the Track_ID field of the Geoevent Definition must have the same name as the field in the Map/Feature Service layer. For instance if your traffic light location data has a field named Light_ID, then messages that are coming from your stream service must also contain a field named Light_ID.
--James Cardona
We got it working last night. Here's a snippet and a screen shot. We can change out the "symbol" property under each UniqueValueInfos object between "blue" for the simple marker and "blueSym" for the picture marker (and red/redSym). This is using the sandbox example page so we just put our prototype code directly in the addStreamLayer() function. We also had to make sure to reference the 4.6 javascript API at the top. ArcGIS API for JavaScript Sandbox You may also need to make sure to import all the correct modules at the top of the "require([" portion. You'll also need to fix the URLs for the picture marker symbols to point to your server.
function addStreamLayer() {
//Renderer
var blueArrow = "http://yourserver/navigationArrow.png";
var redArrow = "http://yourserver/redArrow.jpg";
var defaultPic = "https://yourserver/Xmark.png";
var blueSym = new PictureMarkerSymbol({
url: blueArrow,
width: 10,
height: 10
});
var redSym = new PictureMarkerSymbol({
url: redArrow,
width: 10,
height: 10
});
var defSymbol = new PictureMarkerSymbol({
url: defaultPic,
width: 10,
height: 10
});
var blue = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: "blue",
path: "M14.5,29 23.5,0 14.5,9 5.5,0z",
angle: 180,
size: 10
};
var red = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: "red",
path: "M14.5,29 23.5,0 14.5,9 5.5,0z",
angle: 180,
size: 10
};
//create renderer
var uvr2 = {
type: "unique-value",
field: "predictable",
defaultSymbol: { type: "simple-fill"},
uniqueValueInfos: [{
value: "true", //predictable field is a string type
symbol: blue,
label: "Predictable" // used in the legend to describe features with this symbol
}, {
value: "false",
symbol: red,
label: "Not Predictable" // used in the legend to describe features with this symbol
}],
visualVariables: [{
type: "rotation",
field: "heading",
rotationType: "geographic"
}]
};
var svcUrl = "https://geoeventsample1.esri.com:6443/arcgis/rest/services/LABus/StreamServer";
// Construct Stream Layer
streamLayer = new StreamLayer({
url: svcUrl,
renderer: uvr2,
purgeOptions: {
displayCount: 10000
}
});
// When graphics controller created, register listeners for events
streamLayer.on("graphics-controller-create", function(evt) {
controller = evt.graphicsController;
// Connect and disconnect events
controller.on("connect", processConnect);
controller.on("disconnect", processDisconnect);
// FilterChange event
controller.on("filter-change", processFilterChange);
});
map.add(streamLayer);
}
