LogoLogo
  • Welcome
  • What's new?
  • Docs
    • User guides
      • Get Started
      • Kepler.gl workflow
        • Add data to layers
          • Adding Data Layers
          • Create a Layer
          • Blend and Rearrange Layers
          • Hide, Edit and Delete Layers
        • Add Data to the Map
      • Layers
        • Point
        • S2 Layer
        • Icon
        • Line
        • Cluster
        • Polygon
        • Hexbin
        • Grid
        • H3
        • Heatmap
        • Arc
        • Trip layer
      • Layer Attributes
      • Color Palettes
      • Filters
      • Map Styles
      • Interactions
      • Map Settings
      • Time Playback
      • Save and Export
      • FAQ
    • API Reference
      • ecosystem
      • Get Started
      • Advanced usages
        • Saving and Loading Maps with Schema Manager
        • Replace UI Component with Component Dependency Injection
        • Forward Dispatch Actions
        • Reducer Plugin
        • Using Updaters
        • Custom reducer initial state
        • custom-mapbox-host
      • Components
      • Reducers
        • reducers
        • map-style
        • map-state
        • combine
        • overview
        • ui-state
        • vis-state
      • Processors
        • All processors
      • Schemas
      • Actions
        • All actions
      • Cloud providers
        • Provider
      • Custom theme
      • Localization
    • Jupyter Notebook
  • Examples
    • Node/Express
    • Demo App
    • Open modal
    • Open modal
    • UMD client
    • Customize kepler.gl Theme
    • Customize kepler.gl Reducer
  • Contributing
    • Developing Kepler.gl
    • Contributor Covenant Code of Conduct
  • Change Log
  • Upgrade Guide
Powered by GitBook
On this page

Was this helpful?

  1. Docs
  2. User guides
  3. Layers

Trip layer

PreviousArcNextLayer Attributes

Last updated 5 years ago

Was this helpful?

Trip layer can display animated path.

Grid layer

How to use trip layer to animate path

Data format Currently trip layer support a special geoJSON format where the coordinate linestring has a 4th element denoting timestamp.

In order to animate the path, the geoJSON data needs to contain LineString in its features' geometry, and the coordinates in the LineString need to have 4 elements in the format of [longitude, latitude, altitude, timestamp], with the last element being a timestamp. Valid timestamp formats include unix in seconds such as 1564184363 or in milliseconds such as 1564184363000.

Sample data

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

Note Support for more data formats such as csv will be added in future releases.

Layer attributes

  • Color

    The path can be colored by an attribute from the properties.

  • Stroke Width

    Stroke width can be set by an attribute from the properties.

  • Trail Length

    Trail length determines how long it takes for a path to completely fade out in seconds. This can be adjusted using the slider. Short trail length retains few historical locations while long trail length retain more and show a longer tail.

  • Animation speed

    Animation speed can be adjusted using the animation control at the bottom.

When there are multiple layers

  • Multiple trip layers When you add multiple trip layers, the time range from all the layers will be combined and the animation control will span the entire time range of those layers.

  • Multiple layers containing trip layer and other layers Other static layers can be added besides the trip layers. Upon hiding the trip layer, its animation control will also hide, giving place to the filter control.

Export

To export an animated map, you can use a screen recording or gif capture tool. You can also export the map as an interactive HTML to open in the browser.

Back to table of contents