> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cyclemate.club/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed a route

> Drop a live SuperSafe route map into any page with an iframe

export const LiveRouteEmbed = () => <div className="not-prose" style={{
  margin: '32px 0'
}}>
    <iframe src="https://cyclemate.club/embed/route?origin_lng=-0.126300&amp;origin_lat=51.520600&amp;origin_name=Bloomsbury&amp;dest_lng=-0.114500&amp;dest_lat=51.504500&amp;dest_name=South%20Bank" title="SuperSafe cycling route across London" loading="lazy" scrolling="no" style={{
  width: '100%',
  height: 450,
  border: '1px solid rgba(148, 163, 184, 0.4)',
  borderRadius: 16
}} />
    <div style={{
  fontSize: 14,
  opacity: 0.7,
  marginTop: 12,
  lineHeight: 1.5
}}>
      A live embed: a SuperSafe route from Bloomsbury to the South Bank, routed for right now.
    </div>
  </div>;

## Overview

Any route our planner can produce can be embedded in a page with a plain iframe. The embed renders a live map with the route coloured by safety, a summary bar with the origin, destination, duration, and distance, and a link that opens the same route in the full planner.

No API key or account is needed. The route is computed when the page loads, so it always reflects the current road network, including closures and rider reports. Routes departing after dark render on the night map, with lit streets glowing along the route.

<LiveRouteEmbed />

## Embed code

Point the iframe at `https://cyclemate.club/embed/route` with the parameters below in the query string. URL-encode display names.

```html theme={null}
<iframe
  src="https://cyclemate.club/embed/route?origin_lng=-0.126300&origin_lat=51.520600&origin_name=Bloomsbury&dest_lng=-0.114500&dest_lat=51.504500&dest_name=South%20Bank"
  width="100%"
  height="450"
  frameborder="0"
  scrolling="no"
  loading="lazy"
  title="SuperSafe cycling route"
  style="border-radius:12px;border:none;"></iframe>
```

The map fills whatever size the iframe is given. A height of 450 pixels works well for a full-width embed; the summary bar sits over the bottom of the map at any size.

## URL parameters

A waypoint travels as a trio: longitude, latitude, and a display name. A waypoint missing any of the three is ignored. Coordinates are read to 6 decimal places.

<ParamField query="origin_lng" type="number" required>
  Origin longitude.
</ParamField>

<ParamField query="origin_lat" type="number" required>
  Origin latitude.
</ParamField>

<ParamField query="origin_name" type="string" required>
  Origin display name, shown in the summary bar.
</ParamField>

<ParamField query="dest_lng" type="number" required>
  Destination longitude.
</ParamField>

<ParamField query="dest_lat" type="number" required>
  Destination latitude.
</ParamField>

<ParamField query="dest_name" type="string" required>
  Destination display name, shown in the summary bar.
</ParamField>

<Accordion title="Optional parameters">
  <ParamField query="stop1_lng" type="number">
    Up to three intermediate stops, each its own trio: `stop1_lng`, `stop1_lat`, `stop1_name` through `stop3_*`. Stops are visited in slot order between the origin and the destination.
  </ParamField>

  <ParamField query="supersafe" type="string">
    Set `0` to show the direct route instead of the SuperSafe one. Any other value, or omitting the parameter, keeps SuperSafe routing.
  </ParamField>

  <ParamField query="departure_time" type="string" default="now">
    Planned departure as `"YYYY-MM-DDTHH:mm"` with no timezone offset, interpreted in the route city's timezone. Determines night routing: after dark the embed renders the night map and the route prefers lit streets. Omit to route for now.
  </ParamField>

  <ParamField query="parking" type="string">
    Navigate-to-parking mode: `regular` (cycle racks and stands) or `ebike` (designated rental e-bike bays). The route ends at the nearest qualifying spot near the destination, with a short walk to finish the trip.
  </ParamField>

  <ParamField query="operator" type="string" default="lime">
    Rental e-bike operator (London): `lime` or `forest`. Only meaningful with `parking=ebike`; restricts the bay search to boroughs the operator serves.
  </ParamField>
</Accordion>

## Good to know

* The safety colours on the route line are the same four classes described in the [routing overview](/api-reference/routing/overview).
* The logo in the corner links viewers to the same route in the full planner, in a new tab.
* Routes are computed from each viewer's browser and rate limited per network, so an unusually high-traffic page may see the map wait briefly before loading.
* To open the route in our apps instead of embedding it, see [Deep link to routing](/api-reference/routing/deep-links).