Add traffic animation layer

[heshan0131]

Description

Deck.gl trip layer is probably the most popular layer so far. To support trip animation in kepler.gl, we will add a trip layer into it and allow customize animation.

• Add trip animation layer to animate paths from a sequence of points

• Need to specify latitude, longitude, group by (id, uuid) and the timestamp column

• Add a slider to adjust the tail length, add color by option

• Automatically display a time playback slider when a trip layer is created

Implementation Plan

1. Data format

• GeoJSON Trips data should be formatted as Geojson feature collection, each as a LineString. There are 2 ways time can be embeded for animation:

1. Add a 4th element to LineString coordinates, formatted as epoch seconds. Each point coordinate should be as [longitude, latitude, altitude, timgstamp].
2. Specify start_time and end_time in feature properties, and assign them in trip layer config. If only provide start time and end time, the animation will be in a constant speed.

{
 "type": "Feature",
 "properties": {
    “start_time”: “2019-06-10 17:00”,
    “end_time”: “2019-06-10 19:00”,
    “trip_uuid”: “928-19283-129”
 },
"geometry": {
  "type": "LineString",
  "coordinates": [
    [-122.48369693756104, 37.83381888486939, 0, 1562701757],
    [-122.49223709106445, 37.83337825839438, 0, 1562701758],
    [-122.49378204345702, 37.83368330777276, 0, 1562701790]
  ]
 }
}

• CSV Gps points contained in csv from lat lng column can be used to create path by adding the group by (uuid, id, name, etc) and sort by (time, index, etc) option. Once a collection of path is created, it can be used to create trip layer.

2. Layer config

Trip layer should have the following configuration items:

• Basic

  • Select geometry column (required)
  • Select start time column (optional)
  • Select end time column (optional)

• Info

  • A How-to button (see icon layer)
  • Display instruction in a modal dialog to explain how trip layer works

• Color

  • Select a single color
  • Or allow color based on to the selected color range and color scale

• Animation control

  • Aniamtion control should be shown at the bottom of the map where the time span filter is
  • Animation control should allow adjust animation speed

• Tail length

  • A slider to control tail length

[ohld]

Any updates on this?

[heshan0131]

@yanhann10 will start to work on this starting today, estimated delivery would be mid August

[6156450]

very cool

[ohld]

@heshan0131 !

What is the probability of finishing that task in the current sprint? Really want to test it out in kepler.gl/demo

Thanks

[laurids-reichardt]

Thanks @heshan0131 for the awesome work you're doing! For one of my projects, I would like to visualize bicycle traffic flowing through a city. The trip animation layer would be perfect for that use case. Can't wait till it lands in kepler.gl.

[heshan0131]

Target release date would be end of next week

[laurids-reichardt]

Love the current implementation of the trip layer so far! Noticed a small glitch: below the trail length slider a black closing parentheses is rendered.

[laurids-reichardt]

Do you have an aprox. ETA for when the trip layer implementation will land in master?

[laurids-reichardt]

Sorry to bother again. Will the trips layer be merged into master in the near future? How far along is the development. I love kepler.gl and with the addition of a trips layer it would be a great fit for my project. Thanks so much for all your work!

[heshan0131]

Thanks for your patience, I have some aesthetics to fix, will aim to land this by earlier next week!

[ivarmartin]

Hi! Is this feature currently working on the kepler.gl demo site? I'm trying to visualize a trip by using your json schema from above, but after uploading the geojson as a dataset and trying to create a new trip layer the demo site simply goes blank (white screen).

[will-locsci]

Coolest layer of the bunch, was wondering if csv data format is fully implemented? The current demo is showing to add data in below example format only:

Example:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": { "device":  "A",
      "vol":20},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-74.20986, 40.81773, 0, 1564184363],
          [-74.20987, 40.81765, 0, 1564184396],
          [-74.20998, 40.81746, 0, 1564184409]
        ]
      }
    }
  ]
}

[daizero37]

I have a data set which ranges between nearly a month. The animation is awfully fast even if I slow the speed down to 0.01. If I change the speed to 0.001, it becomes zero. Is there any way that I can input the whole data as welll as getting a nice effect on animation?

第一次用Git，看这个帖子你也好久不回了，还是希望能和您联系上，多谢！ triptest1.txt

[heshan0131]

Can you try this https://deploy-preview-1155--keplergl.netlify.app/demo?

Lowered the speed slider threshold to 0.001. Will land it later if it works

On Wed, Jun 17, 2020 at 12:49 AM daizero37 [email protected] wrote:

I have a data set which ranges between nearly a month. The animation is awfully fast even if I slow the speed down to 0.01. If I change the speed to 0.001, it becomes zero. Is there any way that I can input the whole data as welll as getting a nice effect on animation?

第一次用Git，看这个帖子你也好久不回了，还是希望能和您联系上，多谢！

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/keplergl/kepler.gl/issues/397#issuecomment-645213181, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA3QINHHMNANHA2GTPZ6K2TRXBYPTANCNFSM4G2XJCIQ .

[daizero37]

Can you try this demo? Lowered the speed slider threshold to 0.001. Will land it later if it works … On Wed, Jun 17, 2020 at 12:49 AM daizero37 @.***> wrote: I have a data set which ranges between nearly a month. The animation is awfully fast even if I slow the speed down to 0.01. If I change the speed to 0.001, it becomes zero. Is there any way that I can input the whole data as welll as getting a nice effect on animation? 第一次用Git，看这个帖子你也好久不回了，还是希望能和您联系上，多谢！ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#397 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA3QINHHMNANHA2GTPZ6K2TRXBYPTANCNFSM4G2XJCIQ .

The animation is slowed down, but it is still strange in that there are multiple trips especially when the stroke width is broad. My data only contains 1 trip and all the coordiantes are lined up ordered by timestamp. I think it should be like my test data, but it doesn't work. I've attached my data(triptest4) and my test data(triptest1) below. Thanks for your reply!

triptest4.txt triptest1.txt

[daizero37]

Hello, Shan. Would you please check my data above? :)

[biggigt]

Hello Kepler team and enthusiasts!

I'm looking for a way to add icons to trip-layer, to have an icon from Mapbox to be displayed at the head of the path. Can anyone help me and advise where to dig in the code to update it in that way. (kepler.gl / src / layers / src / trip-layer )

Thanks!

[IpIvanov]

Hello Kepler team and enthusiasts!

I'm looking for a way to add icons to trip-layer, to have an icon from Mapbox to be displayed at the head of the path. Can anyone help me and advise where to dig in the code to update it in that way. (kepler.gl / src / layers / src / trip-layer )

Thanks!

@biggigt any success in finding a way to add icons to the trip layer?

[ParasSharma7]

Hi everyone,

I'm trying to recreate Fleet Visualization demo

I believe it would require addition of the TextLayer and Icons to the trip-layer.

So, I started with first adding the label to trip-layer. I was able to add it to the line-layer (as an exercise) but a similar approach is creating some issues in formatTextLabelData when called from trip-layer. I believe that's due to difference in the structure of the format of the trip-layer data frame.

I'm thinking of re-writing those functions but it mostly would look like a patchy work. Is there any suggestion or advice to do this?

Update 1: I was able to get the label to be plotted on the map but my getPosition is wrong for the label. I need figure out the updateTrigger to update the position of the label. Currently it is defined as: const getPosition = d => d.geometry.coordinates;

So, the label is spread across the whole LineString returned by the geometry coordinates. To be honest, I'm not sure if I'm on the right path. TextLayer is static and I may have to pass the labels to TripLayer as a prop to utilise the updateTrigger part or change the getPosition to utilise currentTime and return the position accordingly.

Update 2: I was able to make the labels move with the trip-layer. But I realised that the textLabel.getText function was incorrect. Now, I'm trying to see how can I get the correct label. Data attribute is somehow missing the labels data in the datum. It is all 0s in the correct index of the label. Data Container has the correct data but I don't know how to use index of data attribute and get the text field.

Here is the function which is responsible for getting the labels:

export const textLabelAccessor = textLabel => dc => d => {
  const val = textLabel.field.valueAccessor(d);
  return notNullorUndefined(val) ? String(val) : '';
};

This doesn't work directly with the trip-layer.

[igorDykhta]

@ilyabo Should we upstream this part with labels?