Documentation menu
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. 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. Columbus Circle to the Chrysler Building, with live MTA buses. Click a bus to overlay its real route.
- 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.
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:
/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.
{
"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 /routewithcosting: "truck"andcosting_options.truckdimensions; see the API reference. - Scene restyling comes from MapMap Studio hosted styles.
- The cluster framing and the automotive pitch live at /automotive.
Map rendering © OpenStreetMap contributors.