Ask or search…
K
Links

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.

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:
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>
Key link to enroll key or passcode https://racemap.com/app/redeem_key?key=6G615L
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
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
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
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>