Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Stream Layer
Explore in the sandbox
Open in CodePen
View live sample
Description
Receive, filter, and display a stream of data using the StreamLayer class. The StreamLayer relies on WebSockets and is only supported in browsers that have WebSockets.The service used in this sample is for demonstration purposes only and mimics an ArcGIS GeoEvent Processor for Server. To publish your own streams of data, please refer to the GeoEvent Processor documentation.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>StreamLayer using ArcGIS API for JavaScript and ArcGIS Server Stream Service</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style type="text/css">
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
body{
background-color: #fff; overflow:hidden;
font-family: sans-serif;
}
p {
margin: 2px;
}
.controls {
margin-left: 10px;
padding-top: 10px;
}
#map {
width: 100%;
height: 80%;
}
</style>
<script src="https://js.arcgis.com/3.46/"></script>
</head>
<body class="tundra">
<div id="map"></div>
<div class="controls">
<span>Stream service url: </span><input type="text" id="txtStreamUrl" value="https://geoeventsample1.esri.com:6443/arcgis/rest/services/LABus/StreamServer" style="color:#ffffff; width:600px; background-color: #8b0000"/><br>
<input type="button" id="cmdToggleStreamLayer" value="Make Stream Layer" />
</div>
<div id="divFilterControls" class="controls" style="display: none">
<p>Draw extent to filter messages by a bounding box</p>
<input type="button" id="cmdToggleSpatialFilter" value="Draw Extent" /><br>
</div>
</body>
<script>
require(["esri/map",
"esri/toolbars/draw",
"esri/layers/StreamLayer",
"esri/InfoTemplate",
"esri/graphic",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/_base/Color",
"dojo/on",
"dojo/domReady!"
], function(Map, Draw, StreamLayer, InfoTemplate, Graphic, SimpleFillSymbol,
SimpleLineSymbol, Color, on) {
var map,
drawTools,
streamLayer;
function init(){
map = new Map("map", {
basemap: "gray-vector",
center: [-117.98118, 34.00679],
zoom: 9
});
drawTools = new Draw(map);
//connect click events to UI buttons
on(dojo.byId("cmdToggleStreamLayer"), "click", toggleStreamLayer);
on(dojo.byId("cmdToggleSpatialFilter"), "click", toggleSpatialFilter);
on(drawTools, "draw-end", function(evt){
drawTools.deactivate();
setSpatialFilter(evt.geometry);
dojo.byId("cmdToggleSpatialFilter").value = "Clear Spatial Filter";
});
}
/*************************************************
*
* Functions to add and remove Stream Layer
*
*************************************************/
function toggleStreamLayer(){
if(streamLayer){
removeStreamLayer();
}
else{
addStreamLayer();
}
}
function addStreamLayer(){
//url to stream service
var svcUrl = dojo.byId("txtStreamUrl").value;
//construct Stream Layer
streamLayer = new StreamLayer(svcUrl, {
purgeOptions: { displayCount: 10000 },
infoTemplate: new InfoTemplate("Attributes", "${*}")
});
//When layer loads, register listeners for layer events and add layer to map
streamLayer.on("load", function(){
//Connect and Disconnect events
streamLayer.on("connect", processConnect);
streamLayer.on("disconnect", processDisconnect);
//FilterChange event
streamLayer.on("filter-change", processFilterChange);
//Add layer to map
map.addLayer(streamLayer);
});
}
function removeStreamLayer(){
if (streamLayer){
map.removeLayer(streamLayer);
streamLayer = null;
map.graphics.clear();
}
}
/*********************************************************
*
* Stream layer event handlers
*
*********************************************************/
function processConnect(){
dojo.byId("cmdToggleStreamLayer").value = "Remove Stream Layer";
dojo.byId("txtStreamUrl").style.backgroundColor = "#008000";
dojo.byId("cmdToggleSpatialFilter").value = "Draw Extent";
dojo.byId("divFilterControls").style.display = "block";
}
function processDisconnect(){
dojo.byId("cmdToggleStreamLayer").value = "Add Stream Layer";
dojo.byId("txtStreamUrl").style.backgroundColor = "#8b0000";
dojo.byId("divFilterControls").style.display = "none";
}
function processFilterChange(evt){
//clear layer graphics
streamLayer.clear();
//the event contains a filter property that is the current filter set on the service
//update map graphic to show current spatial filter
var bbox = evt.filter.geometry;
map.graphics.clear();
if(bbox){
map.graphics.add(new Graphic(bbox,
new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color( [5, 112, 176] ), 2),
new Color( [5, 112, 176, 0] ))));
}
}
/************************************************
*
* Functions to set and clear spatial filter
*
************************************************/
function toggleSpatialFilter(){
var currentSpatialFilter = null;
if(streamLayer){
currentSpatialFilter = streamLayer.getFilter().geometry;
}
if (!currentSpatialFilter){
drawTools.activate(Draw.EXTENT);
}
else{
setSpatialFilter(null);
dojo.byId("cmdToggleSpatialFilter").value = "Draw Extent";
}
}
//Set spatial filter on stream layer. Setting to null clears filter
function setSpatialFilter(bbox){
if (streamLayer){
streamLayer.setGeometryDefinition(bbox);
}
}
init();
});
</script>
</html>