Route Animation Mode

The default render mode. Animates a route between waypoints with a moving vehicle icon, smart routing algorithms, and optional HUD elements.

Basic Example

{
  "mode": "route_animation",
  "waypoints": [
    { "lat": 29.9792, "lng": 32.5731, "label": "Suez Canal" },
    { "lat": 1.2644, "lng": 103.8176, "label": "Singapore" }
  ],
  "transport": "ship",
  "style": "maritime-dark",
  "duration": 12
}

Waypoint Properties

Property	Type	Required	Description
`lat`	number	required	Latitude (-90 to 90)
`lng`	number	required	Longitude (-180 to 180)
`label`	string	optional	Text label shown on map
`dwell`	number	optional	Seconds to pause at this waypoint
`emphasis`	enum	optional	`standard`, `waypoint`, `chokepoint`
`camera_zoom_override`	number	optional	Override zoom level at this point
`camera_hold_seconds`	number	optional	Hold camera at this point

Transport Types

The transport parameter is a simplified way to configure vehicle icon, route calculation, and speed:

Transport	Vehicle Icon	Route Mode	Default Speed
`ship`	Ship icon	`sea` (maritime routing)	35 km/h
`truck`	Truck icon	`road` (road routing)	80 km/h
`plane`	Plane icon	`manual` (great circle)	900 km/h

Example: Truck Route

{
  "waypoints": [
    { "lat": 24.0854, "lng": 38.0447, "label": "Yanbu" },
    { "lat": 25.9381, "lng": 49.6631, "label": "Abqaiq" }
  ],
  "transport": "truck",
  "hud": {
    "stats": { "position": "top-right" }
  }
}

Route Calculation

For more control over routing, use the route parameter instead of transport:

{
  "route": {
    "mode": "sea",
    "avoid": ["suez", "panama"]
  }
}

Mode	Description	Use Case
`manual`	Straight lines (great circle)	Planes, custom paths
`sea`	Maritime routing (follows shipping lanes)	Ships, avoiding land
`road`	Road routing (follows actual roads)	Trucks, cars

Maritime Route Options

Avoid specific chokepoints for alternative route visualization:

{
  "route": {
    "mode": "sea",
    "avoid": ["suez", "panama", "malacca", "gibraltar"]
  }
}

Route Style

Customize the appearance of the route line and vehicle:

{
  "route_style": {
    "color": "#E63946",
    "width": 3,
    "animated": true,
    "dash": false,
    "vehicle_icon": "ship",
    "vehicle_size": 32,
    "vehicle_color": "#FFFFFF",
    "vehicle_outline_color": "#000000",
    "vehicle_outline_width": 2,
    "follow_waterway": true,
    "contrast_mode": "auto"
  }
}

Property	Type	Default	Description
`color`	string	Style-dependent	Route line color (hex)
`width`	number	3	Route line width in pixels
`animated`	boolean	true	Animate route drawing
`dash`	boolean	false	Use dashed line
`vehicle_icon`	enum/bool	false	`ship`, `truck`, `plane`, or `true`/`false`
`vehicle_size`	number	32	Vehicle icon size in pixels
`follow_waterway`	boolean	false	Smooth route to follow water (for canals)

Complete Example

{
  "mode": "route_animation",
  "waypoints": [
    { "lat": 29.9792, "lng": 32.5731, "label": "Port Said", "emphasis": "chokepoint" },
    { "lat": 12.3567, "lng": 43.6028, "label": "Bab el-Mandeb", "dwell": 1 },
    { "lat": 1.2644, "lng": 103.8176, "label": "Singapore" }
  ],
  "transport": "ship",
  "style": "maritime-dark",
  "duration": 15,
  "resolution": "4k",
  "route_style": {
    "color": "#00D4FF",
    "width": 4,
    "vehicle_size": 40
  },
  "hud": {
    "stats": { "show_distance": true, "show_time": true },
    "progress_bar": true
  },
  "camera": {
    "preset": "global_corridor_reveal",
    "intensity": "bold"
  }
}