RangeError: offset is out of bounds

[JoshBello]

Description

Keep getting this error not sure what's going on.

deck: error during update of TripsLayer({id: 'trips-layer'}) RangeError: offset is out of bounds
    at Float32Array.set (<anonymous>)
    at TripsLayer._autoUpdater (attribute.js:446)
    at Attribute.updateBuffer (attribute.js:219)
    at AttributeManager._updateAttribute (attribute-manager.js:321)
    at AttributeManager.update (attribute-manager.js:148)
    at TripsLayer._updateAttributes (layer.js:599)
    at TripsLayer._updateState (layer.js:841)
    at TripsLayer._update (layer.js:790)
    at LayerManager._updateLayer (layer-manager.js:378)
    at LayerManager._updateSublayersRecursively (layer-manager.js:322)

Setup

  useEffect(() => {
      const db = firebase.firestore()
      db.collection('drones').onSnapshot((snapshot) => {
          const dronesData = []
          snapshot.forEach(doc => dronesData.push(({ ...doc.data() , id: doc.id})))
          let droneObj = {

          };

          console.log("dronesData", dronesData);

          const dronesDataFormatted = [];

          for(const drone of dronesData){
            console.log(drone);

            droneObj.path = [Object.entries(drone.path[0])[0][1], Object.entries(drone.path[0])[1][1]];
            droneObj.timestamps = drone.timestamps;
            droneObj.vendor = drone.vendor;
            dronesDataFormatted.push(droneObj);
          }
          console.log('Drones Data', dronesDataFormatted)

          setData(dronesDataFormatted)
      })
  }, [])


  const layers = [
    // This is only needed when using shadow effects
    new TripsLayer({
      id: 'trips-layer',
      data: data,
      getPath: d => d.path,
      getTimestamps: d => d.timestamps,
      getColor: d => (d.vendor === 0 ? theme.trailColor0 : theme.trailColor1),
      opacity: 0.3,
      widthMinPixels: 2,
      rounded: true,
      trailLength,
      currentTime: 1,
      shadowEnabled: false
    })
  ];

Environment

• Browser Version: [e.g. Chrome 78.0]
• OS: [e.g. Mac OS X 11.3.1 ]

[Pessimistress]

Make sure you have one timestamp for each path vertex: https://deck.gl/docs/api-reference/geo-layers/trips-layer#gettimestamps

If that doesn't fix your problem, please share a sample of your data.

[JoshBello]

Hi @Pessimistress, thanks for helping out.

Here is a sample of the data:

1:
path: (2) [-74.01231, 40.70699]
timestamps: [1637]
vendor: 1
__proto__: Object

[Pessimistress]

That's not a valid path, a path needs to contain more than one point.

[JoshBello]

Thanks @Pessimistress for your response.

I have changed the data format to this:

0:
paths: Array(11)
0: (2) [40.70699, -74.01231]
1: (2) [40.70676, -74.0125]
2: (2) [40.70587, -74.01324]
3: (2) [40.70619, -74.01417]
4: (2) [40.70626, -74.01428]
5: (2) [40.70629, -74.0143]
6: (2) [40.70643, -74.01403]
7: (2) [40.70653, -74.01389]
8: (2) [40.70663, -74.01377]
9: (2) [40.70706, -74.01343]
10: (2) [40.70782, -74.01292]
length: 11
__proto__: Array(0)
timestamps: (11) [1637, 1649.555, 1698.228, 1738.146, 1743.759, 1745.492, 1754.273, 1759.437, 1764.225, 1781.978, 1812.174]
vendor: 1
__proto__: Object

I now get no errors but nothing is displayed on the map.

[Pessimistress]

Your longitudes and latitudes are swapped.