Add traffic animation layer

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

[heshan0131]

Target release date would be end of next week

[heshan0131]

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