Embed interactive content

Embed the event visualization, tracking map, live ranks, leaderboard, and monitor directly on your pages with an iFrame.

Unique URL

Each event has a unique URL for the tracking map, leaderboard, and monitor. You can access these applications also by replacing <slug> with the corresponding eventId. This approach allows for automatically generated, stable URLs that remain functional even if the <slug> changes.

• Tracking map https://racemap.com/player/<slug>

  https://racemap.com/player/100KmDuathlon2018 https://racemap.com/player/61a2055b10cacc0001302283

• Leaderboard https://racemap.com/timing/<slug>

  https://racemap.com/timing/100KmDuathlon2018 https://racemap.com/timing/61a2055b10cacc0001302283

• Monitor https://racemap.com/monitor/<slug>

  https://racemap.com/monitor/100KmDuathlon2018 https://racemap.com/monitor/61a2055b10cacc0001302283

RACEMAP provides two dynamically generated pages for key-based access, also.

• Activity upload https://racemap.com/upload?key=<key> https://racemap.com/upload?key=6G615L

• Key link to enroll key (or passcode) https://racemap.com/app/redeem_key?key=<key> https://racemap.com/app/redeem_key?key=6G615L

iFrame integration

Easily embed live tracking, leaderboards, live rankings, and the monitor on any webpage using an iFrame. This allows you to display interactive content directly on your site, keeping visitors engaged without redirecting them to external pages. By embedding these applications, you provide a seamless user experience while maintaining full control over your website’s navigation and branding.

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

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

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>