Embed interactive content
Embed the event visualization, tracking map, live ranks, leaderboard, and monitor directly on your pages with an iFrame.
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
RACEMAP 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.
<iframe src="https://racemap.com/player/100KmDuathlon2018" style="width: 100%; height: 800px"></iframe><iframe src="https://racemap.com/player/100KmDuathlon2018" style="width: 100%; height: 800px; border: solid 2px rgb(90, 90, 90); border-radius : 10px; box-shadow: 0 0 25px rgb(112, 139, 161)" allow="geolocation 'src'" loading="lazy" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>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
<iframe src="https://racemap.com/timing/virtual-race" style="width: 100%; height: 800px; border: none; box-shadow: 0 0 10px rgb(112, 139, 161)" loading="lazy" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>Monitor
https://racemap.com/monitor/100KmDuathlon2018 sample: https://racemap.com/embed-samples#monitor
<iframe src="https://racemap.com/monitor/5a535fdf787fe25ece1a0cc8" style="width: 100%; height: 1000px; border: none; box-shadow: 0 0 10px rgb(112, 139, 161)" loading="lazy" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>Activity upload
https://racemap.com/upload?key=6G615L sample: https://racemap.com/embed-samples#upload
<iframe src="https://racemap.com/upload?key=6G615L" style="width: 100%; height: 1150px; border: none; box-shadow: 0 0 10px rgb(112, 139, 161)" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>Key link
https://racemap.com/app/redeem_key?key=6G615L sample: https://racemap.com/embed-samples#key-link
<iframe src="https://racemap.com/app/redeem_key?key=6G615L" style="width: 100%; height: 1100px; border: none; box-shadow: 0 0 10px rgb(112, 139, 161)" loading="lazy" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>Last updated