50,000 free calls a month, card-free. Get an API key →

Documentation menu
docs / demos · raw .md

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.

ParameterValuesEffect
timeday, dusk, night, dawnLight preset. Omit it and the scene follows the real sun at the city's location.
vehicletruckLondon 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.
citymanhattanCluster only. Swaps the London drive for the Manhattan one.
embed1Cluster 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.
stylea hosted style idRestyles 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.
lit0 to 3Multiplies the fraction of lit windows after dark.
warmth0.7 to 1.3Shifts 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
    }
  }
}
FieldTypeEffect
wallTint#rrggbbMixed into every facade family's wall colour (overrides the building palette slot).
lightPresetday, dusk, night, dawnCarried with the theme for Studio; scene re-timing from it is in progress.
litnumber, 0 to 3Multiplies the lit-window fraction after dark.
warmthnumber, 0.7 to 1.3Lit-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.

  • The same routing is available at POST /route with costing: "truck" and costing_options.truck dimensions; 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.