Overview
Six kinds of page can be embedded, each as a live map or view that updates on its own:
No API key or account is needed. Routes are computed when the page loads, so they always reflect 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.
The quickest way to get an embed is the builder: “Embed on your site” in the share menu of any route, ride, profile or explore page, in our apps and on the web. It lets you pick the layers, theme, base map and size, shows a live preview, and hands over the right snippet for where it is going: an HTML snippet, the page’s URL for tools that unfurl links and for a bio (it carries your display options, so the unfurled map matches the preview), a link for Notion, or a still image for email, which you can also download. Everything below is what the builder produces, for when you want to write it yourself.
Embed code
Point the iframe athttps://cyclemate.club/embed/route with the parameters below in the query string. URL-encode display names.
A profile embed under 200 pixels tall shows the rider’s hero row alone. A profile or explored map shows exactly what a logged-out visitor sees on the rider’s page: sections the rider keeps private are absent, and a private explored map renders an empty frame that says so.
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.number
required
Origin longitude.
number
required
Origin latitude.
string
required
Origin display name, shown in the summary.
number
required
Destination longitude.
number
required
Destination latitude.
string
required
Destination display name, shown in the summary.
Optional parameters
Optional parameters
number
Up to eight intermediate stops, each its own trio:
stop1_lng, stop1_lat, stop1_name through stop8_*. Stops are visited in slot order between the origin and the destination.string
Set
0 to show the direct route instead of the SuperSafe one. Any other value, or omitting the parameter, keeps SuperSafe routing.string
Which variant a night route opens on:
1 the one routed for well-lit streets, 0 the daytime one. Only meaningful when the route is computed at night, when both are available; by day it is ignored.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.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.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.Display options
Every embed URL also takes these. A URL with none of them shows the page’s defaults, so an embed made before an option existed keeps its look.string
A comma-separated list of everything that is on. Map layers, on routes, rides and explore maps:
cycleways, ltns, quiet, moderate, busy, shared, collisions, reports, roadworks, lighting, infrastructure. The page’s own toggles: safety (the safety colours on the line) and info (the summary) on a route or ride, plus photos on an unlisted ride. Routes and rides default to safety,info, explore maps to cycleways,ltns,collisions. Present but empty turns everything off. Profiles and explored maps take no layers.string
default:"auto"
auto follows the viewer’s colour scheme; light or dark fixes it.string
default:"cyclemate"
The base map:
cyclemate, standard or satellite.string
default:"md"
The preset the embed is sized for:
sm (520 × 340), md (680 × 440), lg (880 × 570) or resp (full width, 440 tall). Set the iframe’s width and height to match.lighting layer switches the map to its night style, as it does in the app. Unknown values are ignored rather than failing the embed.
Paste a link
Platforms that unfurl pasted links can embed a Cyclemate page without any markup. Every embeddable page carries an oEmbed discovery tag, and the endpoint below answers for the page.string
required
The page to embed: a planner route (
/search?…), a ride or event (/event/<alias>), a rider profile (/users/<slug>), a rider’s explored map (/users/<slug>/rides), or an explore map (/explore/<city>, /explore/london/<borough>). An explore map URL that carries a planned route (/explore/london?origin_lng=…&dest_name=…) embeds as that route. Any other page answers 404.The display options above (layers, theme, base, size) may ride on this URL’s query, and the returned frame is drawn with them: https://cyclemate.club/explore/london?theme=dark&base=satellite unfurls as a dark satellite map. That is what the builder’s Embed URL carries. A URL without them unfurls with the page’s defaults.Optional parameters
Optional parameters
integer
The widest frame the platform can show, in pixels. The response picks the
size on the page URL when that fits, otherwise the largest of 520, 680 and 880 that fits; 680 when nothing is asked for.integer
The tallest frame the platform can show, in pixels.
string
Only
json. Any other value answers 501.rich oEmbed object: html holds the iframe, width and height its size, provider_url the page itself, and a thumbnail_url (1200 × 630) for route and explore pages and for a rider whose explored map is public.
- Notion: type
/embedand paste the embed URL from the table above, or the builder’s Notion link. - Ghost, Squarespace and other tools that read the discovery tag: paste the page link on its own line.
- WordPress: a pasted link renders the map inside a sandbox that disables the links in it. Use the builder’s HTML snippet in a Custom HTML block instead, which also keeps the attribution link.
- Email, newsletters and LinkedIn articles: no frame renders there. Use a still image, below.
Still images
Every map page has a 1200 × 630 picture of itself, the image a shared link previews with. The builder’s “Static image” destination copies it as an image linking to the page, sized to 600 pixels wide. Keep that link: the image carries the Cyclemate wordmark, and the link around it to the page it pictures is its attribution, the same condition the logo meets in a frame.
A route image is cached for up to a month, so it can trail the live page after the road network changes. Rides and profiles use their own cover photo.
Attribution
Every embed carries the Cyclemate logo, linking to the same page on cyclemate.club. The builder’s page HTML draws that logo in your page as a plain link beside the frame; a still image carries the wordmark and is wrapped in a link to its page. Keeping the logo visible and the link in place, pointing where it was given, is a condition of embedding, set out in the API terms.Good to know
- The safety colours on the route line are the same four classes described in the routing overview.
- 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 a route in our apps instead of embedding it, see Deep link to routing.