Embed this map
Show a few rides from rides.basecampnotes.com on your own site: a map with their route lines and the matching cards beside it.
1. Pick the rides
Every card on the site has its own address, for example /ride/sea-otter-gravel-90-1a2b3c. The last 6 characters (1a2b3c) are its code. Open a card, copy its link with the link icon, and take the code from the end.
- A course code (one distance of an event; its address starts
/ride/) shows that course. - An event code (from an address starting
/event/) shows all of the event's courses. - A route code (from
/route/) shows that recommended route.
Courses, events and routes can be mixed in one set: the frame then shows both kinds, courses first, routes below.
2. Build the address
Start with https://rides.basecampnotes.com/embed#k= and add the codes, separated by commas:
https://rides.basecampnotes.com/embed#k=1a2b3c,4d5e6f
Optional settings, joined with & (order does not matter):
| Setting | Meaning | Values |
|---|---|---|
t | Color theme | d dark, a follow the visitor's device (default: light) |
l | Map style | outdoors, satellite, osm, landscape, atlas, transit (default: simple) |
Example: …/embed#k=1a2b3c,4d5e6f&l=outdoors&t=d. Visitors can still change the map style and colors under Options > Appearance.
3. Put it on your page
<iframe src="https://rides.basecampnotes.com/embed#k=1a2b3c,4d5e6f"
title="Rides map" width="100%" height="480" style="border:0"
loading="lazy"></iframe>
From 640 pixels wide the map and the card list sit side by side; narrower frames get the phone layout (cards in a sheet you drag up). The map opens zoomed to fit the rides you picked.
Inside the frame there are only a few controls: Open in Rides ↗ in the top corner (the full site in a new tab, showing the same rides); an Options tab at the top edge of the map, with search, Filters, Sort, Appearance (map style and colors) and Copy link (copies that address, with any filters); and, once a visitor picks a card, an All button that brings back every ride in the frame.
Named sets (optional)
Instead of a list of codes you can save the set under a name once, then use …/embed#n=name. Names use 2 to 49 lowercase letters, digits or dashes, for example sea-otter-2027. If a named set is ever removed, the frame shows the whole map instead.
Saving gives you a delete key, shown once. Keep it: it is the only way to delete the set yourself.
Conditions
- Embedding is free. Declare your site first with the Embed request form; the editor may later show the map only on declared sites.
- Keep the frame as it is: don't hide or cover the map's credits or the Open in Rides control, and don't present the rides as your own.
- Don't imply that the editor or the event organizers endorse your site.
- The editor may switch embedding off for a site, or change how it works, at any time.
- Event details change. The cards say where each one comes from; check the organizer's page before you ride.
Privacy
The embedded map sets no cookies and stores nothing in the visitor's browser. It tells this site which site it is shown on (that site's address only, such as https://example.com), and this site counts views and opened cards per day for each embedding site. Nothing about the visitor is kept. Map tiles come from Stadia Maps, Thunderforest or USGS depending on the map style, and Cloudflare sits in front of the site.
Named sets are kept on this site's server: the name, the label, the card codes, when the set was saved and when it was last used, and a scrambled copy of the delete key. Nothing about you or your visitors. The editor reviews saved sets and may switch any of them off.
Questions
To declare your site or ask for help, use the Embed request form (Feedback to Editor on the main site). If your site was switched off, the frame shows a short note and an Open in Rides link instead of the map; ask through the same form.