1.1.0 • Public • Published

    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: ''

    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.


    Option Type Description
    url String Required The service url of a streaming layer eg
    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.


        var buses = L.esri.streamFeatureLayer({
            url: '',
            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


    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.


        var buses = L.esri.streamFeatureLayer({
            url: ''


    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.


        function msgEvent (msgDetails) {
        buses.on('socketMessage', msgDetails);


    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.


    npm i esri-leaflet-stream

    DownloadsWeekly Downloads






    Unpacked Size

    19.2 kB

    Total Files


    Last publish


    • avatar