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.

Unique URL
Each event has a unique URL for the tracking map and for the leaderboard. 
format tracking map: https://racemap.com/player/slug 
​https://racemap.com/player/100KmDuathlon2018 
format leaderboard: https://racemap.com/timing/slug 
​https://racemap.com/timing/100KmDuathlon2018​
format monitor: https://racemap.com/monitor/slug 
​https://racemap.com/monitor/100KmDuathlon2018​
iFrame integration
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:
Embedded tracking map: https://racemap.com/embed-samples#iframe 
Tracking map embedded with options: https://racemap.com/embed-samples#shadow​
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>.
black: https://racemap.com/player/100KmDuathlon2018#color=000000​
green: https://racemap.com/player/100KmDuathlon2018#color=66cd00​
red: https://racemap.com/player/100KmDuathlon2018#color=cc0000​
sample: https://racemap.com/embed-samples#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>
 
Leaderboard: https://racemap.com/timing/virtual-race​
sample: https://racemap.com/embed-samples#leaderboard​
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>
 
Monitor: https://racemap.com/monitor/100KmDuathlon2018​
sample: https://racemap.com/embed-samples#monitor​
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>
​
Activity upload: https://racemap.com/upload?key=6G615L​
sample: https://racemap.com/embed-samples#upload​
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>
 
Key link to enroll key or passcode https://racemap.com/app/redeem_key?key=6G615L​
sample: https://racemap.com/embed-samples#key-link​
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>
 
Dynamic links
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 
sample: https://racemap.com/embed-samples#select​
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:GER​
sample: https://racemap.com/embed-samples#filter​
1
<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
sample URL: https://racemap.com/player/100KmDuathlon2018#time=2018-05-05T09:46:35Z​
sample: https://racemap.com/embed-samples#time​
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>

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

Group and stages

Keys and passcode

Last modified 4mo ago