Esri Leaflet Stream

A plugin for Esri Leaflet that enables consuming Stream Services published by ArcGIS for Server. View Demo

Basic Usage

Step 1. Include the required js in your document.

   	<script src="dist/esri-leaflet-stream.min.js"></script> 

Step 2. Create a stream layer using the L.esri.streamFeatureLayer function, the socket connection is started automatically when the layer is added to the map.

    var buses = L.esri.streamFeatureLayer({
        url: 'https://geoeventsample1.esri.com:6443/arcgis/rest/services/LABus/StreamServer'
    }).addTo(map);

Background Information

Esri Stream Services provide a convenient way to consume streaming data published via the GeoEvent Extension with ArcGIS for Server. Basically they continually send data to the website which you can then use however you'd like. For more information also check out the REST API.

Options

Option	Type	Description
url	String	Required The service url of a streaming layer eg https://geoeventsample3.esri.com:6443/arcgis/rest/services/SeattleBus/StreamServer
useMapViewExtent	Boolean	Applies a geographic filter meaning data is only sent for the current map view (note: the extent updates as the map is panned and zoomed). Defaults to false.
customExtent	Envelope Object	An Esri envelope to spatial restrict the features. Not set by default.
where	String	An optional expression to filter features server side. String values should be denoted using single quotes ie: where: "FIELDNAME = 'field value'"; More information about valid SQL syntax.
fields	Array	An array of fieldnames to pull from the service. Includes all fields by default.
wss	Boolean	Whether to use secure protocol or not. Set to false as default.

Example

    var buses = L.esri.streamFeatureLayer({
        url: 'https://geoeventsample1.esri.com:6443/arcgis/rest/services/LABus/StreamServer',
        useMapViewExtent: true,
        where: "run_id='76_173_1'",
        fields: ['run_id', 'heading'],
        pointToLayer: function (geojson, latlng) {
            return L.circleMarker(latlng, {
                fillColor: createRandomFill(),
                fillOpacity: 0.8,
                color: "#cccccc",
                weight: 2
            });
        },
    }).addTo(map);
 

Methods

Method	Description
setCustomExtent(<Envelope Object>)	Set a new custom extent for the socket connection.
clearCustomExtent()	Removes the custom extent meaning no geographic filter will be applied to the socket connection.
useMapViewExtent(Boolean)	Set whether to use the map view extent as a geographic filter for the socket connection, this updates automatically as the map is zoomed and panned.
setWhere(String)	Sets a where clause on the socket connection to limit data received by the socket connection.
clearWhere()	Remove the where clause from the socket connection.
clearLayers()	Clears the layers drawn by the socket connection.

Example

    var buses = L.esri.streamFeatureLayer({
        url: 'https://geoeventsample1.esri.com:6443/arcgis/rest/services/LABus/StreamServer'
    }).addTo(map);
    buses.setWhere("run_id='76_173_1'");
    buses.useMapViewExtent(false);

Events

Event	Description
socketConnected	The socket connection has successfully connected.
socketError	The socket connection failed to connect.
socketMessage	A message was received by the socket connection, returns an object containing the geojson feature as well as the resulting leaflet layer.
socketUpdated	A message confirming that the socket connection has been updated, triggered when the filters change.

Example

    function msgEvent (msgDetails) {
        console.log(msgDetails.feature);
        console.log(msgDetails.layer);
    }
    buses.on('socketMessage', msgDetails);

Acknowledgements

Huge hats off go to mourner and all the contributors to the leaflet.js project! Additional thanks to the folks involved in esri-leaflet for making it super easy to work with services published from the Esri stack.