Trips Layer Example¶

This notebook demonstrates the DeckGL TripsLayer for animated path visualization.

Trips layers are ideal for:

• Visualizing vehicle routes over time
• Animation of movement patterns
• GPS trajectory visualization
• Time-based path analysis

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Basic Trips Layer¶

In [ ]:

from anymap_ts import DeckGLMap

# Sample trip data with waypoints and timestamps
trips = [
    {
        "waypoints": [
            [-122.45, 37.78],
            [-122.42, 37.79],
            [-122.40, 37.78],
            [-122.38, 37.80],
            [-122.35, 37.79],
        ],
        "timestamps": [0, 30, 60, 90, 120],
        "name": "Trip 1",
    },
    {
        "waypoints": [
            [-122.50, 37.75],
            [-122.47, 37.77],
            [-122.44, 37.76],
            [-122.41, 37.78],
            [-122.38, 37.77],
        ],
        "timestamps": [10, 40, 70, 100, 130],
        "name": "Trip 2",
    },
    {
        "waypoints": [
            [-122.43, 37.82],
            [-122.41, 37.80],
            [-122.39, 37.78],
            [-122.37, 37.76],
            [-122.35, 37.74],
        ],
        "timestamps": [20, 50, 80, 110, 140],
        "name": "Trip 3",
    },
]

m = DeckGLMap(center=[-122.42, 37.78], zoom=12)
m.add_basemap("CartoDB.DarkMatter")
m.add_trips_layer(
    data=trips,
    name="trips-basic",
    get_path="waypoints",
    get_timestamps="timestamps",
    get_color=[253, 128, 93],
    width_min_pixels=3,
    trail_length=180,
    current_time=60,  # Show trails up to time=60
)
m

from anymap_ts import DeckGLMap # Sample trip data with waypoints and timestamps trips = [ { "waypoints": [ [-122.45, 37.78], [-122.42, 37.79], [-122.40, 37.78], [-122.38, 37.80], [-122.35, 37.79], ], "timestamps": [0, 30, 60, 90, 120], "name": "Trip 1", }, { "waypoints": [ [-122.50, 37.75], [-122.47, 37.77], [-122.44, 37.76], [-122.41, 37.78], [-122.38, 37.77], ], "timestamps": [10, 40, 70, 100, 130], "name": "Trip 2", }, { "waypoints": [ [-122.43, 37.82], [-122.41, 37.80], [-122.39, 37.78], [-122.37, 37.76], [-122.35, 37.74], ], "timestamps": [20, 50, 80, 110, 140], "name": "Trip 3", }, ] m = DeckGLMap(center=[-122.42, 37.78], zoom=12) m.add_basemap("CartoDB.DarkMatter") m.add_trips_layer( data=trips, name="trips-basic", get_path="waypoints", get_timestamps="timestamps", get_color=[253, 128, 93], width_min_pixels=3, trail_length=180, current_time=60, # Show trails up to time=60 ) m

Trips Layer with Different Colors¶

In [ ]:

# Trips with individual colors
colored_trips = [
    {
        "waypoints": trips[0]["waypoints"],
        "timestamps": trips[0]["timestamps"],
        "color": [255, 100, 100],  # Red
    },
    {
        "waypoints": trips[1]["waypoints"],
        "timestamps": trips[1]["timestamps"],
        "color": [100, 255, 100],  # Green
    },
    {
        "waypoints": trips[2]["waypoints"],
        "timestamps": trips[2]["timestamps"],
        "color": [100, 100, 255],  # Blue
    },
]

m2 = DeckGLMap(center=[-122.42, 37.78], zoom=12)
m2.add_basemap("CartoDB.DarkMatter")
m2.add_trips_layer(
    data=colored_trips,
    name="trips-colored",
    get_path="waypoints",
    get_timestamps="timestamps",
    get_color="color",  # Use color property from data
    width_min_pixels=4,
    trail_length=200,
    current_time=80,
)
m2

# Trips with individual colors colored_trips = [ { "waypoints": trips[0]["waypoints"], "timestamps": trips[0]["timestamps"], "color": [255, 100, 100], # Red }, { "waypoints": trips[1]["waypoints"], "timestamps": trips[1]["timestamps"], "color": [100, 255, 100], # Green }, { "waypoints": trips[2]["waypoints"], "timestamps": trips[2]["timestamps"], "color": [100, 100, 255], # Blue }, ] m2 = DeckGLMap(center=[-122.42, 37.78], zoom=12) m2.add_basemap("CartoDB.DarkMatter") m2.add_trips_layer( data=colored_trips, name="trips-colored", get_path="waypoints", get_timestamps="timestamps", get_color="color", # Use color property from data width_min_pixels=4, trail_length=200, current_time=80, ) m2

Using the Generic add_deckgl_layer Method¶

In [ ]:

m3 = DeckGLMap(center=[-122.42, 37.78], zoom=12)
m3.add_basemap("CartoDB.DarkMatter")

# Add trips layer using the generic method
m3.add_deckgl_layer(
    layer_type="TripsLayer",
    data=trips,
    name="trips-generic",
    getPath="waypoints",
    getTimestamps="timestamps",
    getColor=[255, 200, 0],  # Orange
    widthMinPixels=3,
    trailLength=150,
    currentTime=100,
)
m3

m3 = DeckGLMap(center=[-122.42, 37.78], zoom=12) m3.add_basemap("CartoDB.DarkMatter") # Add trips layer using the generic method m3.add_deckgl_layer( layer_type="TripsLayer", data=trips, name="trips-generic", getPath="waypoints", getTimestamps="timestamps", getColor=[255, 200, 0], # Orange widthMinPixels=3, trailLength=150, currentTime=100, ) m3

Trips Layer with Layer Control¶

In [ ]:

m4 = DeckGLMap(center=[-122.42, 37.78], zoom=12)
m4.add_basemap("CartoDB.DarkMatter")

m4.add_trips_layer(
    data=trips,
    name="trips-animated",
    trail_length=180,
    current_time=90,
)

m4.add_layer_control()
m4

m4 = DeckGLMap(center=[-122.42, 37.78], zoom=12) m4.add_basemap("CartoDB.DarkMatter") m4.add_trips_layer( data=trips, name="trips-animated", trail_length=180, current_time=90, ) m4.add_layer_control() m4

Export to HTML¶

In [ ]:

m.to_html("trips_layer_example.html")

m.to_html("trips_layer_example.html")