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
<iframe src="https://racemap.com/player/100KmDuathlon2018" style="width: 100%; height: 800px"></iframe>
Tracking map embedded with options
<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:

AttributeDescription

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>.

sample: https://racemap.com/embed-samples#color

<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

<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 to enroll key or passcode 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>

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

<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

<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

<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>
PreviousGroup and stagesNextKeys and passcode

Last updated