# 3D navigation demos

Two live turn-by-turn drives rendered in 3D, plus an instrument-cluster
framing for automotive evaluation. Everything is served by the same
self-hosted MapMap stack as the API: vector tiles, routing, guidance and
map styling. No Google services are involved at any layer.

- **London**: [/demo/london-3d](/demo/london-3d). Westminster Bridge to
  Trafalgar Square. Buildings at surveyed LIDAR heights, live TfL bus
  positions, Thames vessels from AIS, weather that matches the sky.
- **Manhattan**: [/demo/manhattan-3d](/demo/manhattan-3d). Columbus Circle
  to the Chrysler Building, with live MTA buses. Click a bus to overlay
  its real route.
- **Cluster**: [/demo/cluster](/demo/cluster). The London or Manhattan
  drive letterboxed to a 12.3 inch instrument cluster (1920 x 720) in a
  dashboard bezel. This is the automotive door-opener; see
  [/automotive](/automotive).

Both drives keep navigating while you interact: drag to look around,
scroll to zoom, and use Re-centre to return to the chase camera.

## URL parameters

All parameters compose, on the demo pages and on the cluster.

| Parameter | Values | Effect |
| --- | --- | --- |
| `time` | `day`, `dusk`, `night`, `dawn` | Light preset. Omit it and the scene follows the real sun at the city's location. |
| `vehicle` | `truck` | London only. Routes the same endpoints through truck costing with a declared 4.5 m, 18 t vehicle. The engine routes via Victoria Embankment instead of Whitehall, with an HGV chip on the HUD. |
| `city` | `manhattan` | Cluster only. Swaps the London drive for the Manhattan one. |
| `embed` | `1` | Cluster only. Strips the page's own bezel and caption so the display fills the viewport, for embedding in an iframe that draws its own frame. |
| `style` | a hosted style id | Restyles the scene from a MapMap Studio style: the building palette slot tints the facades, and water, park, sky and road colours recolour the basemap. If the theme carries an explicit `extra.scene3d` block (below), its values apply on top of the derived colours. |
| `lit` | `0` to `3` | Multiplies the fraction of lit windows after dark. |
| `warmth` | `0.7` to `1.3` | Shifts the lit-window colour temperature, cool to sodium. |

Examples:

```text
/demo/cluster?city=manhattan&time=night
/demo/cluster?vehicle=truck&time=dusk
/demo/london-3d?time=day&style=<your-style-id>
```

## The scene3d theme block

A hosted theme's `extra.scene3d` object gives a style explicit control of
the 3D scene, beyond what the palette derivation infers. All fields are
optional and validated individually; a malformed field is ignored rather
than breaking the drive. URL parameters win over the block.

```json
{
  "extra": {
    "scene3d": {
      "wallTint": "#8a4b3c",
      "lightPreset": "dusk",
      "lit": 1.6,
      "warmth": 1.15
    }
  }
}
```

| Field | Type | Effect |
| --- | --- | --- |
| `wallTint` | `#rrggbb` | Mixed into every facade family's wall colour (overrides the building palette slot). |
| `lightPreset` | `day`, `dusk`, `night`, `dawn` | Carried with the theme for Studio; scene re-timing from it is in progress. |
| `lit` | number, 0 to 3 | Multiplies the lit-window fraction after dark. |
| `warmth` | number, 0.7 to 1.3 | Lit-window colour temperature, cool to sodium. |

The block rides the theme document's opaque `extra` field, so it works on
every existing gateway version and never affects compiled MapLibre output.

## What the demos are, honestly

One scripted corridor per city, not a product surface: the rest of the
planet renders as the standard map. The buses and vessels are only ever
real vehicles from live feeds; when an upstream feed is down, they are
absent rather than simulated. The truck route is baked from the engine's
own truck-costing response; the keyless demo proxy the website uses
speaks car costing only.

## Related

- The same routing is available at `POST /route` with
  `costing: "truck"` and `costing_options.truck` dimensions; see the
  [API reference](/docs/api-reference).
- Scene restyling comes from [MapMap Studio](/studio) hosted styles.
- The cluster framing and the automotive pitch live at
  [/automotive](/automotive).

Map rendering © OpenStreetMap contributors.