UpdatesGPS trackersLoginFree trial

Embed interactive content

Embed the event visualization, tracking map, live ranks, leaderboard, and monitor directly on your pages with an iFrame. Use dynamic links and URL parameters to address & control specific features.

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.

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

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:

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>

URL parameters

Use URL parameters to automatically compose various URLs of the same tracking map fitting different use cases.

Custom color

Select a custom color as the premier color of the tracking map as a hex code. parameter: color=<your_color>

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

Select participants, POIs, and tracks *

The tracking map automatically centers around selected elements.

parameter: selected=<participantId>,<trackId>,<poiId>

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

Set filters

Set the tracking map with filters. Use the none argument to hide participants with DNS, DSQ, and DNF status.

parameter: filter=<tag-1>:<value-12>,<tag3:value-1>

URL with filter tags age "20" and nationality "GER": https://racemap.com/player/MuenchenMarathon21-marathon#filter=age:20,nationality:GER

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

Time of event *

The tracking map loads at a specific time of the event. The time is required in ISO 8601 format.

parameter: time=yyyy-mm-ddThh:mm:ssZ

URL starts the replay at 9:45:35 UTC time, at Mai 5th 2018: https://racemap.com/player/100KmDuathlon2018#time=2018-05-05T09:46:35Z

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

Map style *

Show or hide navigation bar *

Show flags or dots of all participants *

Set flag content *

The set flag content parameter applies only on the shown flags. It does not show all flags automatically.

Select flag content *

The select flag content parameter applies only on the selected <participantId>. It does not show all flags automatically.

Hide non-selected participants *

Hide all participants' dots or flags that are not selected:

hideNonSelected=true https://racemap.com/player/100KmDuathlon2018#selected=632c5f966d787712f2e66ada&selectedFlagContent=TWO_LETTER_NAMES&hideNonSelected=true

Increase marker size *

Show dots, flags, and POIs with large marker dimensions eg. when showing the tracking map on a LED screen or for the production of TV overlays.

largeMode=true https://racemap.com/player/100KmDuathlon2018#largeMode=true

Show or hide tabs section *

Info tabs can be elevation chart, event info, race statistics, etc.

Set default tab *

Set the default tab in the info section.

Disable tabs *

Disable specific info tabs in the info section, comma separated.

Set zoom level *

Set the default zoom level of the tracking map, according to the mapbox zoom scale (https://docs.mapbox.com/help/glossary/zoom-level/).

PreviousGroup and stagesNextKeys and passcode

Last updated