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.
Last updated
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.
Last updated
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>
Leaderboard
https://racemap.com/timing/<slug>
Monitor
https://racemap.com/monitor/<slug>
RACEMAP provides two dynamically generated pages for key-based access, also.
Activity upload
https://racemap.com/upload?key=<key>
Key link to enroll key (or passcode)
https://racemap.com/app/redeem_key?key=<key>
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.
Samples with the above html-code:
Embedded tracking map:
Tracking map embedded with options:
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
Use URL parameters to automatically compose various URLs of the same tracking map fitting different use cases.
URL parameters overwrite the default settings of the tracking map.
(*) URL parameters are removed from the URL after the map is loaded, while the other parameters remain in the URL.
Select a custom color as the premier color of the tracking map as a hex code.
parameter: color=<your_color>
The tracking map automatically centers around selected elements.
parameter: selected=<participantId>,<trackId>,<poiId>
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>
parameter: time=yyyy-mm-ddThh:mm:ssZ
The set flag content parameter applies only on the shown flags. It does not show all flags automatically.
The select flag content parameter applies only on the selected <participantId>. It does not show all flags automatically.
Hide all participants' dots or flags that are not selected:
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.
Info tabs can be elevation chart, event info, race statistics, etc.
Set the default tab in the info section.
Disable specific info tabs in the info section, comma separated.
sample:
sample:
sample:
sample:
Combine different parameters with & flagContent=NAME&showAllFlags=true&mapStyle=DARK&flagContent=TWO_LETTER_NAMES
black:
green:
red:
sample:
URL to follow the teams "Flaming Sideburns" and "Wolfsrudel Mädels" at 100km-Duathlon:
sample:
URL with filter tags age "20" and nationality "GER":
sample:
The tracking map loads at a specific time of the event. The time is required in format.
URL starts the replay at 9:45:35 UTC time, at Mai 5th 2018:
sample:
Satellite:
mapStyle=SATELLITE
Terrain:
mapStyle=TERRAIN
Hybrid:
mapStyle=HYBRID
Roadmap:
mapStyle=ROADMAP
Dark:
mapStyle=DARK
Open list:
listOpen=true
Close list:
listOpen=false
Show all flags:
showAllFlags=true
Show all dots:
showAllFlags=false
Race number:
flagContent=STARTNUMBER
Name of participant:
flagContent=NAME
Race number and name of participant:
flagContent=STARTNUMBER_AND_NAME
Race number and the two first letters of the first and the last name eg. 012KoTr:
flagContent=TWO_LETTER_NAMES
Race number and the first letter of the first and the last name eg. 012KT:
flagContent=ONE_LETTER_NAMES
Race number:
selectedFlagContent=STARTNUMBER
Name of participant:
selectedFlagContent=NAME
Name of participant:
selectedFlagContent=STARTNUMBER_AND_NAME
Race number and 1st letter of participant's name:
selectedFlagContent=ONE_LETTER_NAMES
Race number and 1st & 2nd letter of participant's name:
selectedFlagContent=TWO_LETTER_NAMES
hideNonSelected=true
largeMode=true
Open info tabs:
infoTabs.OpenByDefault=true
Close info tabs:
infoTabs.OpenByDefault=false
Event info:
infoTabs.defaultTab=INFO
Elevation chart:
infoTabs.defaultTab=ELEVATION
Leaderboard:
infoTabs.defaultTab=TIMING
Race statistics:
infoTabs.defaultTab=STATS
Race flow:
infoTabs.defaultTab=FLOW
infoTabs.DisabledTabs=INFO,ELEVATION,TIMING,FLOW,STATS
Set the default zoom level of the tracking map, according to the mapbox zoom scale ().
zoom=9