Embed interactive content
Embed the event visualization, live ranks, leaderboard, and monitor directly on your pages with an iFrame. Use dynamic links for specific features.
Each event has a unique URL for the tracking map and for the leaderboard.
- format tracking map:
https://racemap.com/player/slug - format leaderboard:
https://racemap.com/timing/slug - format monitor:
https://racemap.com/monitor/slug
Embed live tracking, leaderboards, live ranking and the monitor on any page or blog. Through an iFrame, you show the interactive content directly on your sites and visitors don't navigate to external pages.
Embedded tracking map
1
<iframe src="https://racemap.com/player/100KmDuathlon2018" style="width: 100%; height: 800px"></iframe>
Tracking map embedded with options
1
<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:
Attribute | Description |
|---|---|
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 |
Custom color in visualization
Set the hex color code in the URL of the tracking map
color=<your_color>.1
<iframe src="https://racemap.com/player/100KmDuathlon2018#color=000000" style="width: 100%; height: 800px; border: none; box-shadow: 0 0 10px rgb(112, 139, 161)" allow="geolocation 'src'" loading="lazy" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
1
<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>
1
<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>
1
<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>
1
<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>
Selected participants and POIs - tracking map centers around selected participants and points of interest
sample 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 1
<iframe src="https://racemap.com/player/100KmDuathlon2018#selected=_fvbgsw4wo,61a20ea7e368e52f49592680,61a20ea7e368e56b5a592689,61a20ea7e368e5ef4159283b,61a20ea7e368e5a2cd592832" style="width: 100%; height: 1000px; border: none; box-shadow: 0 0 10px rgb(112, 139, 161)" allow="geolocation 'src'" loading="lazy" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
Filter settings - tracking map with selected filters
sample URL with filter tags age "20" and nationality "German": https://racemap.com/player/gmm21-marathon-racemap_2021-10-10
#filter=age:20,nationality:GER1
<iframe src="https://racemap.com/player/MuenchenMarathon21-marathon#filter=age:20,nationality:GER" style="width: 100%; height: 1000px; border: none; box-shadow: 0 0 10px rgb(112, 139, 161)" allow="geolocation 'src'" loading="lazy" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
Specific time of event - tracking map loads at a specific time of the event, time in ISO 8601 format
1
<iframe src="https://racemap.com/player/100KmDuathlon2018#time=2018-05-05T09:46:35Z&selected=61a20ea7e368e57a805927bd" style="width: 100%; height: 1000px; border: none; box-shadow: 0 0 10px rgb(112, 139, 161)" allow="geolocation 'src'" loading="lazy" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
Last modified 26d ago