Trip time attributes

[iskandari]

I am working with the sample data in examples/trips which animates the individual paths of trips from a json array of coordinate pairs in trips/data/trips.json and their timestamp (under the segments key):

  {
    "vendor": 0,
    "startTime": -6009,
    "endTime": -73,
    "segments": [
      [-74.00512,40.70885,-240.2903114727269],
      [-74.00412,40.70757,-143.07371644388058],
      [-74.00406,40.70745,-134.68729333963165],
      [-74.00406,40.70745,-134.68729333963165],
      [-74.005,40.70685,-92.627775153519],
      [-74.005,40.70685,-92.627775153519],
      [-74.00461,40.70646,-73]
    ]
  },
  {
    "vendor": 0,
    "startTime": 1637,
    "endTime": 4871,
    "segments": [
      [-74.27508,40.6065,1637],
      [-74.27419,40.60623,1666.1660477453581],
      [-74.27419,40.60623,1666.1660477453581],
      [-74.27382,40.60689,1679.7486292567967],
      [-74.27364,40.60728,1687.5738812450202],
      [-74.27364,40.60738,1689.4674755260214],
      [-74.27368,40.6076,1693.672882919071],
      [-74.27377,40.60786,1698.7633952254641],
      [-74.27377,40.60786,1698.7633952254641],
      [-74.27257,40.60817,1717.4312641972276],
      [-74.27156,40.60842,1733.0763925729443],
      [-74.27156,40.60842,1733.0763925729443],
      [-74.27146,40.6079,1743.2742620429444],
      [-74.27136,40.60737,1753.6641909814323],
      [-74.27136,40.60737,1753.6641909814323],
      [-74.26967,40.60743,1786.2615384615385],
      [-74.26967,40.60743,1786.2615384615385],
      [-74.26959,40.60665,1799.9867374005305],
      [-74.26959,40.60665,1799.9867374005305],
      [-74.26721,40.6068,1835.563471334915]
    ]
  }, 

My question is regarding the time attributes. Why is it that startTime and endTime do not always correspond to the first and last objects in the segments array? ? For example, in the first object, startTime is -6009 but the first coordinate pair has a timestamp of -240. In the second object, the endTime is 4871 but the last coordinate pair has a timestamp of 1835. How should one understand the startTime and endTime and how they relate to the timestamp? This is not accurately explained in the documentation and any clarification would help.

[Pessimistress]

Hi @iskandari, thanks for pointing out the inconsistency in the sample data. startTime and endTime are not actually used by the TripsLayer. I will remove them from the example to avoid confusion.

[iskandari]

Thanks for that clarification @Pessimistress. How should one understand the negative numbers in the timestamp? In the sample data, does the counter loop begin at 0 ms and end at 60000 ms? If so, how do the negative timestamps factor into the loop?

  _animate() {
    const timestamp = Date.now();
    const loopLength = 1800;
    const loopTime = 60000; 

    this.setState({
      time: ((timestamp % loopTime) / loopTime) * loopLength
    });

Let's say that I want to input my own sample data - all trips that occurred over the course of one day (the timestamp range would be 0:86400 as there are 86400 seconds in one day). I would like to condense this into a 60-second loop that animates the trips as they happened in order. For example, in the sample data below, the first trip occurs at the start of the day, the second in the middle of the day, and the third at the end of the day. What parameters would have to be changed so as to create a 60-second loop that goes through the range of timestamps 0:86400?

{
"vendor": 0,
"segments": [
 [ -79.87493, 43.25175, 0], 
 [ -79.87499, 43.25165,100],
 [ -79.87499, 43.25165, 200],
 [-79.87501, 43.25162, 300],
 [-79.87500, 43.25163, 400]
]
},
{
"vendor": 0,
"segments": [
 [-79.90765, 43.26102, 40000],
 [-79.90765, 43.26111, 40100],
 [-79.90765, 43.26111, 40200],
 [-79.90763, 43.26110, 40300],
]
},
{
"vendor": 0,
"segments": [
 [-79.90927, 43.26067, 80000],
 [-79.90925, 43.26052, 80100],
 [-79.90920, 43.26055, 80200],
 [-79.90920, 43.26055, 80300],
 [-79.90927, 43.26060, 80400]
]
}

[amanjuneja3012]

+1 for negative timestamp problem .

And why the center of the map is hardcoded , it can't be generated using segments data ??

[Pessimistress]

@iskandari The absolute timestamps does not matter - it's the difference between a timestamp and the currentTime prop that determines the animation frame. You may as well use UNIX timestamps and have your timer loop between, say, 1483228800 and 1483315200. If that makes sense, then trips with negative timestamps in your context are just trips that started the previous day and ended on the current day.

As for the time loop, you may consider using tween.js to manage your timer, something like:

new TWEEN.Tween({currentTime: 0})
    .to({currentTime: 86400}, 60 * 1000);

[Pessimistress]

@amanjuneja3012 The code in question is meant to be a minimal example showing how to write a custom layer. The layer itself doesn't manage the viewport, the app does. You can use it as a starting point and implement the features that make sense to you.