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

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

• 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

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