Select to view content in your preferred language

Client side Stream Layer is not working with point geometry

812
3
Jump to solution
11-22-2023 06:51 PM
PrashantR
Occasional Contributor

I am trying to create a client side stream layer which has the geometry type as "point". The features are not getting added in the layer. Added my code below. Any idea what am I doing wrong?

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Client-side StreamLayer | Sample | ArcGIS Maps SDK for JavaScript 4.27</title>

  <style>
    html,
    body,
    #viewDiv {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.27/"></script>
  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/StreamLayer",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/geometry/geometryEngine",
      "esri/geometry/Point",
      "esri/geometry/SpatialReference",
      "esri/geometry/projection"
    ], (Map, MapView, StreamLayer, SimpleMarkerSymbol, geometryEngine, Point, SpatialReference, projection) =>
      (async () => {


        // Create a client-side stream layer by setting its
        // required properties and additional desired properties
        const layer = new StreamLayer({
          // field schemas in the fields array should match the
          // feature attributes that will stream to the layer.
          // set the objectIdField and trackIdField in the fields
          objectIdField: "OBJECTID",
          fields: [
            {
              name: "OBJECTID",
              alias: "OBJECTID",
              type: "oid",
            },
            {
              name: "TRACKID",
              alias: "TrackId",
              type: "long",
            }
          ],
          // trackIdField is required and the field schema must exist
          // in the fields array
          timeInfo: {
            trackIdField: "TRACKID"
          },
          updateInterval: 100,
          geometryType: "point", // required property
          spatialReference: {
            wkid: 4326
          },
          // set unique value renderer based on the status field
          renderer: {
            type: "simple",
            symbol: {
              type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
              color: [226, 119, 40],
              outline: {
                // autocasts as new SimpleLineSymbol()
                color: [255, 255, 255],
                width: 2
              }
            }
          }
        });


        const map = new Map({
          basemap: "gray-vector",
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map,
          zoom: 2,
          center: [-118.4, 34.0573]
        });

        view.whenLayerView(layer).then((layerView) => {
          layer.sendMessageToClient({
            type: "features",
            features: [
              {
                attributes: {
                  TRACKID: 1,
                  OBJECTID: 1
                },
                geometry: {
                  type: "point",
                  latitude: -101,
                  longitude: 40,
                  spatialReference: {
                    wkid: 4326
                  }
                }
              }
            ]
          });
        });
      })());
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>
 
 
0 Kudos
1 Solution

Accepted Solutions
UndralBatsukh
Esri Regular Contributor

Hi there, 

Please take a look at the Add an array for client-side features topic to see the requirements for creating a client side stream layer. In this section, the following is pointed out: 

Geometries of features added to the StreamLayer must be in the spatial reference of the view, because the layer's spatialReference is always set to the spatial reference of the view. To avoid overhead, the stream layer does not do any additional processing or reprojecting on features as they arrive.

Based on this statement, you either need to change the basemap of the map to be in WGS 84 or the StreamLayer projection to match the view's spatialReference. 

In any case, I updated your app to make couple of changes: https://codepen.io/U_B_U/pen/oNmMoyy?editors=1000

1. First I updated the baseman to be WGS84 basemap

2. Then I updated the geometry of the feature you are adding to use x and y coordinates instead of latitude and longitude. 

You can see these updates in the codepen I provided above.

View solution in original post

0 Kudos
3 Replies
UndralBatsukh
Esri Regular Contributor

Hi there, 

Please take a look at the Add an array for client-side features topic to see the requirements for creating a client side stream layer. In this section, the following is pointed out: 

Geometries of features added to the StreamLayer must be in the spatial reference of the view, because the layer's spatialReference is always set to the spatial reference of the view. To avoid overhead, the stream layer does not do any additional processing or reprojecting on features as they arrive.

Based on this statement, you either need to change the basemap of the map to be in WGS 84 or the StreamLayer projection to match the view's spatialReference. 

In any case, I updated your app to make couple of changes: https://codepen.io/U_B_U/pen/oNmMoyy?editors=1000

1. First I updated the baseman to be WGS84 basemap

2. Then I updated the geometry of the feature you are adding to use x and y coordinates instead of latitude and longitude. 

You can see these updates in the codepen I provided above.

0 Kudos
PrashantR
Occasional Contributor

Thanks @UndralBatsukh

I do not want to change the basemap , how do we change the StreamLayer projection to match the view's spatialReference?

0 Kudos
UndralBatsukh
Esri Regular Contributor

Nothing changes. Basically update the codepen. Update the app so that the spatialReference of the StreamLayer matches the spatialReference of the view and pass the points in the spatial reference of the view. For example, this sample https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/client-side-stream-layer-is-not-w... passes the coordinates in Web Mercator.

 

0 Kudos