Multi-Route Mode

Shows multiple routes from a single origin to multiple destinations. Perfect for trade networks, distribution maps, and route comparisons.

Basic Example

{
  "mode": "multi_route",
  "multi_route": {
    "origin": {
      "lat": 31.2304,
      "lng": 121.4737,
      "label": "Shanghai"
    },
    "routes": [
      { "lat": 51.5074, "lng": -0.1278, "label": "London", "data_label": "35 days" },
      { "lat": 40.7128, "lng": -74.0060, "label": "New York", "data_label": "28 days" },
      { "lat": -33.8688, "lng": 151.2093, "label": "Sydney", "data_label": "14 days" }
    ]
  },
  "style": "standard",
  "duration": 20
}

Origin Properties

Property	Type	Required	Description
`lat`	number	required	Origin latitude
`lng`	number	required	Origin longitude
`label`	string	optional	Origin label

Route Destination Properties

Property	Type	Description
`lat`	number	Destination latitude
`lng`	number	Destination longitude
`label`	string	Destination name
`data_label`	string	Data annotation (e.g., "35 days", "$2.5M")
`color`	string	Route line color (hex)
`label_offset`	object	`{ x, y }` pixel offset for label

Multi-Route Settings

{
  "multi_route": {
    "origin": {...},
    "routes": [...],
    "show_all_routes_at_start": true,
    "animate_labels": true,
    "camera_rotation_degrees": 10,
    "start_zoom": 2,
    "end_zoom": 3,
    "label_collision": "auto-offset",
    "routes_start_at": 4,
    "routes_duration": 5,
    "route_style": {
      "width": 2,
      "opacity": 0.8,
      "use_great_circle": true
    }
  }
}

Property	Type	Default	Description
`show_all_routes_at_start`	boolean	true	Show all routes initially
`animate_labels`	boolean	true	Animate label appearance
`camera_rotation_degrees`	number	0	Camera rotation angle
`start_zoom`	number	Auto	Starting zoom level
`end_zoom`	number	Auto	Ending zoom level
`label_collision`	enum	`none`	`none` or `auto-offset`
`routes_start_at`	number	0	When routes start drawing (seconds)
`routes_duration`	number	Auto	Route drawing duration

Cinematic Camera Path

For complex camera choreography, define keyframes:

{
  "multi_route": {
    "origin": {...},
    "routes": [...],
    "camera_path": [
      { "time": 0, "center": [121.47, 31.23], "zoom": 4, "pitch": 0, "bearing": 0 },
      { "time": 4, "center": [0, 30], "zoom": 1.8, "pitch": 20, "bearing": 0 },
      { "time": null, "center": [0, 30], "zoom": 2.2, "pitch": 20, "bearing": 10 }
    ],
    "routes_start_at": 3,
    "routes_duration": 6
  }
}

Keyframe Properties

Property	Type	Description
`time`	number/null	Time in seconds (`null` = end of video)
`center`	[lng, lat]	Camera center
`zoom`	number	Zoom level
`pitch`	number	Tilt angle (0-85)
`bearing`	number	Rotation angle

Custom Route Colors

{
  "routes": [
    { "lat": 51.5074, "lng": -0.1278, "label": "London", "color": "#E63946" },
    { "lat": 40.7128, "lng": -74.0060, "label": "New York", "color": "#1D3557" },
    { "lat": -33.8688, "lng": 151.2093, "label": "Sydney", "color": "#457B9D" }
  ]
}

Use Cases

Trade networks: Show exports from a single port to multiple destinations
Distribution maps: Visualize supply chain from warehouse to customers
Migration patterns: Origins to multiple destination cities
Route comparisons: Different paths with transit times

Complete Example

{
  "mode": "multi_route",
  "multi_route": {
    "origin": {
      "lat": 31.2304,
      "lng": 121.4737,
      "label": "Shanghai"
    },
    "routes": [
      { "lat": 51.5074, "lng": -0.1278, "label": "London", "data_label": "35 days", "color": "#E63946" },
      { "lat": 40.7128, "lng": -74.0060, "label": "New York", "data_label": "28 days", "color": "#1D3557" },
      { "lat": -33.8688, "lng": 151.2093, "label": "Sydney", "data_label": "14 days", "color": "#457B9D" },
      { "lat": 1.3521, "lng": 103.8198, "label": "Singapore", "data_label": "5 days", "color": "#2A9D8F" }
    ],
    "camera_path": [
      { "time": 0, "center": [121.47, 31.23], "zoom": 4, "pitch": 0, "bearing": 0 },
      { "time": 5, "center": [50, 25], "zoom": 1.5, "pitch": 25, "bearing": 0 },
      { "time": null, "center": [50, 25], "zoom": 1.8, "pitch": 25, "bearing": 15 }
    ],
    "routes_start_at": 4,
    "routes_duration": 8,
    "animate_labels": true
  },
  "style": "standard",
  "duration": 20,
  "text_overlays": [
    {
      "text": "China's Global Trade Routes",
      "position": "top-center",
      "start_time": 0,
      "end_time": 5,
      "font_size": 36
    }
  ]
}