Embed interactive content
Embed the event visualization, tracking map, live ranks, leaderboard, and monitor directly on your pages with an iFrame. Use dynamic links and URL parameters to address & control specific features.
Unique URL
Each event has a unique URL for the tracking map, leaderboard, and monitor. You can access these applications also by replacing <slug> with the corresponding eventId. This approach allows for automatically generated, stable URLs that remain functional even if the <slug> changes.
Tracking map
https://racemap.com/player/<slug>https://racemap.com/player/100KmDuathlon2018 https://racemap.com/player/61a2055b10cacc0001302283
Leaderboard
https://racemap.com/timing/<slug>https://racemap.com/timing/100KmDuathlon2018 https://racemap.com/timing/61a2055b10cacc0001302283
Monitor
https://racemap.com/monitor/<slug>https://racemap.com/monitor/100KmDuathlon2018 https://racemap.com/monitor/61a2055b10cacc0001302283
RRACEMAP provides two dynamically generated pages for key-based access, also.
Activity upload
https://racemap.com/upload?key=<key>https://racemap.com/upload?key=6G615LKey link to enroll key (or passcode)
https://racemap.com/app/redeem_key?key=<key>https://racemap.com/app/redeem_key?key=6G615L
iFrame integration
Easily embed live tracking, leaderboards, live rankings, and the monitor on any webpage using an iFrame. This allows you to display interactive content directly on your site, keeping visitors engaged without redirecting them to external pages. By embedding these applications, you provide a seamless user experience while maintaining full control over your website’s navigation and branding.
Samples with the above html-code:
Embedded tracking map: https://racemap.com/embed-samples#iframe
Tracking map embedded with options: https://racemap.com/embed-samples#shadow
style="width: 100%"
width ratio of the embedded content
style="height: 800px"
height of the embedded content
style="border: solid 2px rgb(90, 90, 90)"
style="border: none"
strength and color of border line
style="border-radius: 10px"
rounded edges
style="box-shadow: 0 0 10px rgb(112, 139, 161)"
strength and color of shadow
allow="geolocation 'src'"
resource allowed to use geolocation interface to enable the "show own location"-feature of tracking map
loading="lazy"
resource loaded only on need
allowfullscreen webkitallowfullscreen mozallowfullscreen
to open the embedded tracking map fullscreen
Leaderboard
https://racemap.com/timing/virtual-race sample: https://racemap.com/embed-samples#leaderboard
Monitor
https://racemap.com/monitor/100KmDuathlon2018 sample: https://racemap.com/embed-samples#monitor
Activity upload
https://racemap.com/upload?key=6G615L sample: https://racemap.com/embed-samples#upload
Key link
https://racemap.com/app/redeem_key?key=6G615L sample: https://racemap.com/embed-samples#key-link
URL parameters
Use below URL parameters to automatically compose various URLs of the same tracking map fitting different use cases.
URL parameters overwrite the default settings of the tracking map.
(*) URL parameters are removed from the URL after the map is loaded, while the other parameters remain in the URL.
Combine different parameters with
& flagContent=NAME&showAllFlags=true&mapStyle=DARK&flagContent=TWO_LETTER_NAMEShttps://racemap.com/player/100KmDuathlon2018#flagContent=NAME&showAllFlags=true&mapStyle=DARK&flagContent=TWO_LETTER_NAMES
Custom color
Select a custom color as the premier color of the tracking map as a hex code.
argument: color=<your_color>
sample: https://racemap.com/embed-samples#color
Select participants, POIs, and tracks *
The tracking map automatically centers around selected elements.
parameter: selected=<participantId>,<trackId>,<poiId>
URL to follow the teams "Flaming Sideburns" and "Wolfsrudel Mädels" at 100km-Duathlon: https://racemap.com/player/100KmDuathlon2018#selected=_fvbgsw4wo,61a20ea7e368e52f49592680,61a20ea7e368e56b5a592689,61a20ea7e368e5ef4159283b,61a20ea7e368e5a2cd592832
sample: https://racemap.com/embed-samples#select
Set filters
Set the tracking map with filters. Eg. you can use none argument to hide participants with DNS, DSQ, and DNF status.
parameter: filter=<tag-1>:<value-12>,<tag3:value-1>
URL with filter tags age "20" and nationality "GER": https://racemap.com/player/MuenchenMarathon21-marathon#filter=age:20,nationality:GER
sample: https://racemap.com/embed-samples#filter
Time of event *
The tracking map loads at a specific time of the event. The time is required in ISO 8601 format.
parameter: time=yyyy-mm-ddThh:mm:ssZ
https://racemap.com/player/100KmDuathlon2018#time=2018-05-05T09:46:35Z
sample: https://racemap.com/embed-samples#time
Map style *
Satellite:
mapStyle=SATELLITEhttps://racemap.com/player/100KmDuathlon2018#mapStyle=SATELLITETerrain:
mapStyle=TERRAINhttps://racemap.com/player/100KmDuathlon2018#mapStyle=TERRAINHybrid:
mapStyle=HYBRIDhttps://racemap.com/player/100KmDuathlon2018#mapStyle=HYBRIDRoadmap:
mapStyle=ROADMAPhttps://racemap.com/player/100KmDuathlon2018#mapStyle=ROADMAPDark:
mapStyle=DARKhttps://racemap.com/player/100KmDuathlon2018#mapStyle=DARK
Show or hide navigation bar *
Open list:
listOpen=truehttps://racemap.com/player/100KmDuathlon2018#listOpen=trueClose list:
listOpen=falsehttps://racemap.com/player/100KmDuathlon2018#listOpen=false
Show flags or dots of all participants *
Show all flags:
showAllFlags=truehttps://racemap.com/player/100KmDuathlon2018#showAllFlags=trueShow all dots:
showAllFlags=falsehttps://racemap.com/player/100KmDuathlon2018#showAllFlags=false
Set flag content *
The flag content parameter applies only on the shown flags. It does not show all flags automatically.
Race number:
flagContent=STARTNUMBERhttps://racemap.com/player/100KmDuathlon2018#flagContent=STARTNUMBER&showAllFlags=trueName of participant:
flagContent=NAMEhttps://racemap.com/player/100KmDuathlon2018#flagContent=NAME&showAllFlags=trueRace number and name of participant:
flagContent=STARTNUMBER_AND_NAMERace number and the two first letters of the first and the last name eg. 012KoTr:
flagContent=TWO_LETTER_NAMEShttps://racemap.com/player/100KmDuathlon2018#flagContent=TWO_LETTER_NAMES&showAllFlags=trueRace number and the first letter of the first and the last name eg. 012KT:
flagContent=ONE_LETTER_NAMEShttps://racemap.com/player/100KmDuathlon2018#flagContent=ONE_LETTER_NAMES&showAllFlags=true
Show or hide tabs section *
Info tabs can be elevation chart, event info, race statistics, etc.
Open info tabs:
infoTabs.OpenByDefault=truehttps://racemap.com/player/100KmDuathlon2018#infoTabs.openByDefault=trueClose info tabs:
infoTabs.OpenByDefault=falsehttps://racemap.com/player/100KmDuathlon2018#infoTabs.openByDefault=false
Set default tab *
Set the default tab in the info section.
Event info:
infoTabs.defaultTab=INFOhttps://racemap.com/player/100KmDuathlon2018#infoTabs.defaultTab=INFOElevation chart:
infoTabs.defaultTab=ELEVATIONhttps://racemap.com/player/100KmDuathlon2018#infoTabs.defaultTab=ELEVATIONLeaderboard:
infoTabs.defaultTab=TIMINGhttps://racemap.com/player/100KmDuathlon2018#infoTabs.defaultTab=TIMINGRace statistics:
infoTabs.defaultTab=STATShttps://racemap.com/player/100KmDuathlon2018#infoTabs.defaultTab=STATSRace flow:
infoTabs.defaultTab=FLOWhttps://racemap.com/player/100KmDuathlon2018#infoTabs.defaultTab=FLOW
Disable tabs *
Disable specific info tabs in the info section, comma separated.
infoTabs.DisabledTabs=INFO,ELEVATION,TIMING,FLOW,STATShttps://racemap.com/player/100KmDuathlon2018#infoTabs.disabledTabs=INFO,ELEVATION,TIMING,FLOW,STATS
Last updated