Embed a route

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

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.

Embed code

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

<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.

origin_lng · number · required

Origin longitude.

origin_lat · number · required

Origin latitude.

origin_name · string · required

Origin display name, shown in the summary bar.

dest_lng · number · required

Destination longitude.

dest_lat · number · required

Destination latitude.

dest_name · string · required

Destination display name, shown in the summary bar.

Optional parameters

stop1_lng · 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.

supersafe · string

Set 0 to show the direct route instead of the SuperSafe one. Any other value, or omitting the parameter, keeps SuperSafe routing.

departure_time · 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.

parking · 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.

operator · 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.

Good to know

• The safety colours on the route line are the same four classes described in the 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.