Select to view content in your preferred language

Add an array of client-side features to StreamLayer

265
0
03-18-2023 02:30 PM
MarkEgge2
New Contributor

I'm using a widget to add a StreamLayer to a map.

If I add a StreamLayer from a StreamServer, everything works fine. E.g.

 

const layer = new StreamLayer({
    url: 'https://geoeventsample1.esri.com:6443/arcgis/rest/services/LABus/StreamServer',
})

 

If, however, I create an array of client-side features and use layer.sendMessageToClient({ type: "features", features: [ ... ]}) the features do not display on the map.

Here's a CodePen of a working version (outside of Experience Builder).

Here's my widget.tsx:

import { React, AllWidgetProps } from 'jimu-core'
import { JimuMapViewComponent, JimuMapView } from 'jimu-arcgis'
import FeatureLayer from 'esri/layers/FeatureLayer'
import StreamLayer from 'esri/layers/StreamLayer'
const { useState } = React

const Widget = (props: AllWidgetProps<any>) => {
  const [jimuMapView, setJimuMapView] = useState<JimuMapView>()

  const activeViewChangeHandler = (jmv: JimuMapView) => {
    if (jmv) {
      setJimuMapView(jmv)
    }
  }

  // Create the StreamLayer
  const layer = new StreamLayer({
     fields: [
      {
        name: "OBJECTID",
        alias: "OBJECTID",
        type: "oid",
      },
      {
        name: "TRACKID",
        alias: "TrackId",
        type: "long",
      }
    ],
    timeInfo: {
      trackIdField: "TRACKID"
    },
    geometryType: "polygon", // required property
    spatialReference: {
      wkid: 102100
    },
    renderer: { 
      type: "simple",
      symbol: {
            type: "simple-fill",
            color: [233, 116, 81, 0.5],
      } 
    }
  })

  let objectIdCounter = 0

  const addLayer = () => {

    // Add the layer to the map (accessed through the Experience Builder JimuMapView data source)
    jimuMapView.view.map.add(layer)
  }

  const addFeatures = () => {

    layer.sendMessageToClient({
      type: "features",
      features: [
        {
          attributes: {
            TRACKID: 1,
            OBJECTID: objectIdCounter++
          },
          geometry: {
            rings: [[
                    [-12475988, 3965039], 
                    [-12476958, 3965047], 
                    [-12475991, 3966004], 
                    [-12475988, 3965039]
            ]]
          }
        },
        {
          attributes: {
            TRACKID: 2,
            OBJECTID: objectIdCounter++
          },
          geometry: {
            rings: [[
                   [-12475020, 3963094], 
                    [-12475019, 3964062], 
                    [-12474046, 3963093], 
                    [-12475020, 3963094]
            ]]
          }
        }
      ]
    })

  }

  return (
    <div className="widget-starter jimu-widget">
      {
        props.useMapWidgetIds &&
        props.useMapWidgetIds.length === 1 && (
          <JimuMapViewComponent
            useMapWidgetId={props.useMapWidgetIds?.[0]}
            onActiveViewChange={activeViewChangeHandler}
          />
        )
      }

      <button onClick={addLayer}>Add Layer</button>
      <button onClick={addFeatures}>Add Features</button>
    </div>
  )
}

export default Widget

 

 

Is this a bug with the new array of client-side features for StreamLayers? (Alternatively, is there a better approach if I want to change the values in a DataSource using logic in the widget and then have the symbology on the map update accordingly?)

Tags (3)
0 Kudos
0 Replies