Route Animation¶

This notebook demonstrates how to animate markers along a route. Great for visualizing GPS tracks, vehicle movements, or storytelling on maps.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Basic Route Animation¶

In [ ]:

from anymap_ts import Map

# Simple route along the California coast
route = [
    [-122.4194, 37.7749],  # San Francisco
    [-122.3, 37.5],
    [-121.9, 36.9],
    [-121.8, 36.6],  # Monterey
    [-121.5, 36.2],
    [-120.8, 35.4],
    [-120.6, 35.1],  # San Luis Obispo
    [-119.9, 34.6],
    [-119.7, 34.4],  # Santa Barbara
    [-118.5, 34.1],
    [-118.2437, 34.0522],  # Los Angeles
]

m = Map(center=[-120.5, 35.5], zoom=6)
m.add_basemap("CartoDB.Positron")

# Also add the route as a line for reference
route_geojson = {
    "type": "Feature",
    "properties": {},
    "geometry": {"type": "LineString", "coordinates": route},
}
m.add_geojson(
    route_geojson,
    name="route-line",
    paint={"line-color": "#888", "line-width": 2, "line-dasharray": [2, 2]},
)

# Animate a marker along the route
anim_id = m.animate_along_route(
    route, duration=15000, loop=True, marker_color="#ff0000"  # 15 seconds
)
print(f"Animation ID: {anim_id}")
m

from anymap_ts import Map # Simple route along the California coast route = [ [-122.4194, 37.7749], # San Francisco [-122.3, 37.5], [-121.9, 36.9], [-121.8, 36.6], # Monterey [-121.5, 36.2], [-120.8, 35.4], [-120.6, 35.1], # San Luis Obispo [-119.9, 34.6], [-119.7, 34.4], # Santa Barbara [-118.5, 34.1], [-118.2437, 34.0522], # Los Angeles ] m = Map(center=[-120.5, 35.5], zoom=6) m.add_basemap("CartoDB.Positron") # Also add the route as a line for reference route_geojson = { "type": "Feature", "properties": {}, "geometry": {"type": "LineString", "coordinates": route}, } m.add_geojson( route_geojson, name="route-line", paint={"line-color": "#888", "line-width": 2, "line-dasharray": [2, 2]}, ) # Animate a marker along the route anim_id = m.animate_along_route( route, duration=15000, loop=True, marker_color="#ff0000" # 15 seconds ) print(f"Animation ID: {anim_id}") m

Animation with Trail¶

In [ ]:

# Circular route around a park
import math

# Create a circular route
center = [-122.4, 37.77]
radius = 0.02  # degrees
points = 50

circular_route = []
for i in range(points + 1):
    angle = 2 * math.pi * i / points
    lng = center[0] + radius * math.cos(angle)
    lat = center[1] + radius * math.sin(angle)
    circular_route.append([lng, lat])

m2 = Map(center=center, zoom=14)
m2.add_basemap("CartoDB.Voyager")

anim2 = m2.animate_along_route(
    circular_route,
    duration=10000,
    loop=True,
    marker_color="#3388ff",
    show_trail=True,
    trail_color="#3388ff",
    trail_width=4,
)
m2

# Circular route around a park import math # Create a circular route center = [-122.4, 37.77] radius = 0.02 # degrees points = 50 circular_route = [] for i in range(points + 1): angle = 2 * math.pi * i / points lng = center[0] + radius * math.cos(angle) lat = center[1] + radius * math.sin(angle) circular_route.append([lng, lat]) m2 = Map(center=center, zoom=14) m2.add_basemap("CartoDB.Voyager") anim2 = m2.animate_along_route( circular_route, duration=10000, loop=True, marker_color="#3388ff", show_trail=True, trail_color="#3388ff", trail_width=4, ) m2

Animation Controls¶

In [ ]:

# Route for control demo
control_route = [
    [-74.0060, 40.7128],  # NYC
    [-73.8, 40.8],
    [-73.5, 40.9],
    [-73.2, 41.0],
    [-72.8, 41.2],
    [-72.5, 41.4],
    [-72.2, 41.6],
    [-71.8, 41.8],
    [-71.4, 42.0],
    [-71.0589, 42.3601],  # Boston
]

m3 = Map(center=[-72.5, 41.2], zoom=7)

# Add route line
m3.add_geojson(
    {
        "type": "Feature",
        "geometry": {"type": "LineString", "coordinates": control_route},
    },
    name="nyc-boston",
    paint={"line-color": "#333", "line-width": 3},
)

anim3 = m3.animate_along_route(
    control_route,
    duration=8000,
    loop=True,
    marker_color="#00aa00",
    animation_id="nyc-to-boston",
)
m3

# Route for control demo control_route = [ [-74.0060, 40.7128], # NYC [-73.8, 40.8], [-73.5, 40.9], [-73.2, 41.0], [-72.8, 41.2], [-72.5, 41.4], [-72.2, 41.6], [-71.8, 41.8], [-71.4, 42.0], [-71.0589, 42.3601], # Boston ] m3 = Map(center=[-72.5, 41.2], zoom=7) # Add route line m3.add_geojson( { "type": "Feature", "geometry": {"type": "LineString", "coordinates": control_route}, }, name="nyc-boston", paint={"line-color": "#333", "line-width": 3}, ) anim3 = m3.animate_along_route( control_route, duration=8000, loop=True, marker_color="#00aa00", animation_id="nyc-to-boston", ) m3

In [ ]:

# Pause the animation
m3.pause_animation("nyc-to-boston")

# Pause the animation m3.pause_animation("nyc-to-boston")

In [ ]:

# Resume the animation
m3.resume_animation("nyc-to-boston")

# Resume the animation m3.resume_animation("nyc-to-boston")

In [ ]:

# Speed up the animation (2x speed)
m3.set_animation_speed("nyc-to-boston", 2.0)

# Speed up the animation (2x speed) m3.set_animation_speed("nyc-to-boston", 2.0)

In [ ]:

# Slow down the animation (0.5x speed)
m3.set_animation_speed("nyc-to-boston", 0.5)

# Slow down the animation (0.5x speed) m3.set_animation_speed("nyc-to-boston", 0.5)

In [ ]:

# Stop the animation
m3.stop_animation("nyc-to-boston")

# Stop the animation m3.stop_animation("nyc-to-boston")

Non-Looping Animation¶

In [ ]:

# Flight path that plays once
flight_route = [
    [-122.3321, 47.6062],  # Seattle
    [-119.0, 46.0],
    [-115.0, 43.0],
    [-111.0, 41.0],
    [-107.0, 39.5],
    [-104.0, 38.5],
    [-100.0, 37.5],
    [-97.0, 36.5],
    [-94.0, 35.5],
    [-91.0, 34.5],
    [-87.0, 33.5],
    [-84.3880, 33.7490],  # Atlanta
]

m4 = Map(center=[-102, 40], zoom=4)
m4.add_basemap("CartoDB.DarkMatter")

# Add route as arc
m4.add_geojson(
    {
        "type": "Feature",
        "geometry": {"type": "LineString", "coordinates": flight_route},
    },
    name="flight-path",
    paint={"line-color": "#ff8800", "line-width": 2, "line-opacity": 0.5},
)

m4.animate_along_route(
    flight_route,
    duration=6000,
    loop=False,  # Play once
    marker_color="#ff8800",
    show_trail=True,
    trail_color="#ff8800",
    trail_width=3,
)
m4

# Flight path that plays once flight_route = [ [-122.3321, 47.6062], # Seattle [-119.0, 46.0], [-115.0, 43.0], [-111.0, 41.0], [-107.0, 39.5], [-104.0, 38.5], [-100.0, 37.5], [-97.0, 36.5], [-94.0, 35.5], [-91.0, 34.5], [-87.0, 33.5], [-84.3880, 33.7490], # Atlanta ] m4 = Map(center=[-102, 40], zoom=4) m4.add_basemap("CartoDB.DarkMatter") # Add route as arc m4.add_geojson( { "type": "Feature", "geometry": {"type": "LineString", "coordinates": flight_route}, }, name="flight-path", paint={"line-color": "#ff8800", "line-width": 2, "line-opacity": 0.5}, ) m4.animate_along_route( flight_route, duration=6000, loop=False, # Play once marker_color="#ff8800", show_trail=True, trail_color="#ff8800", trail_width=3, ) m4

Multiple Simultaneous Animations¶

In [ ]:

# Two cars racing
route_1 = [[-122.4, 37.8], [-122.3, 37.7], [-122.2, 37.6], [-122.1, 37.5]]

route_2 = [[-122.4, 37.78], [-122.28, 37.68], [-122.18, 37.58], [-122.1, 37.5]]

m5 = Map(center=[-122.25, 37.65], zoom=10)

m5.animate_along_route(
    route_1, duration=5000, loop=True, marker_color="#ff0000", animation_id="car-red"
)

m5.animate_along_route(
    route_2,
    duration=4500,  # Slightly faster
    loop=True,
    marker_color="#0000ff",
    animation_id="car-blue",
)
m5

# Two cars racing route_1 = [[-122.4, 37.8], [-122.3, 37.7], [-122.2, 37.6], [-122.1, 37.5]] route_2 = [[-122.4, 37.78], [-122.28, 37.68], [-122.18, 37.58], [-122.1, 37.5]] m5 = Map(center=[-122.25, 37.65], zoom=10) m5.animate_along_route( route_1, duration=5000, loop=True, marker_color="#ff0000", animation_id="car-red" ) m5.animate_along_route( route_2, duration=4500, # Slightly faster loop=True, marker_color="#0000ff", animation_id="car-blue", ) m5

Export to HTML¶

In [ ]:

# Note: Animations may not work in static HTML export
# The HTML export captures the map state at the time of export
m.to_html("route_animation_example.html")

# Note: Animations may not work in static HTML export # The HTML export captures the map state at the time of export m.to_html("route_animation_example.html")