# Event visualization

The visualization of races and activities is optimized for mobile usage.

{% tabs %}
{% tab title="Filter tags" %}
![](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2F4JeuH7M1FksPFLhpN6qH%2Ffilter_tags_mobile_usage.gif?alt=media\&token=87e6949a-720e-4a8b-8103-194c2b09e75e)
{% endtab %}

{% tab title="Leaderboard" %}
![](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2FN1jocTPCoGvOAdMI6sh2%2Fleaderboard_mobile_usage.gif?alt=media\&token=d48dbdb2-ed28-4441-806c-7276fcd4f963)
{% endtab %}
{% endtabs %}

{% hint style="success" %}
Check the visualization of the 100km-Duathlon around Dresden:&#x20;

**live sample** <https://racemap.com/player/100KmDuathlon2018_Repeat>&#x20;

**past sample** (replay) [https://racemap.com/player/100KmDuathlon2018](https://racemap.com/player/100KmDuathlon2018#selected=61a20ea7e368e5ef4159283b,61a20ea7e368e52f49592680)
{% endhint %}

**Upscaling to the largest events:** The visualization is optimized for mobile devices broadcasting the largest sports events in real-time. Like predictive live tracking at München Marathon with 3,000+ participants in one interactive map <https://racemap.com/player/MuenchenMarathon21-marathon>

Or feed your own applications with real-time geodata using our APIs for live location data.

{% content-ref url="../api" %}
[api](https://docs.racemap.com/api)
{% endcontent-ref %}

### Customizations&#x20;

Interactive event map with different tracks & contests, start- & finish zone, and refresh points.&#x20;

{% hint style="success" %}
Recap of Dresden Marathon, GPS tracking with Racemap App: [https://racemap.com/player/DresdenMarathon19](https://racemap.com/player/DresdenMarathon19#selected=5db025e74ec190621b33cedd,5db025ba0d916e820c5743d0\&events=0,1,2)
{% endhint %}

![](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSRNxaH2Ju9Flr7JhJD%2F-MKnVQXOuChwrdOtH3Ht%2F-MKnXAuIultSVSm81RZc%2Fscreenshot-racemap.com-2020.10.29-09_44_35.png?alt=media\&token=949c107b-235d-42cb-b388-f5814a4af4f4)

![flags showing race number (left) and the name (right)](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSRNxaH2Ju9Flr7JhJD%2F-Mk68WBDG2exLTCN9zYX%2F-Mk6FhRiT8vM0FARnM82%2FUnbenannt.PNG?alt=media\&token=d19c7642-1731-4d5e-897c-6dcbab2febcb)

* Color of tracks and of markers,
* Points of interest with names, [emojis](https://emojipedia.org/chequered-flag/) or choose a pictogram,
* Content in flags (bib respectively name)
* Multiple contests and stages.

**Points of interest (POI):** Are displayed and selectable in the map, in the sidebar, and in the elevation chart.&#x20;

<table><thead><tr><th width="162">Parameter</th><th width="150">Map</th><th width="188.1123595505618">Sidebar</th><th>Elevation chart</th></tr></thead><tbody><tr><td>Pictogram</td><td>✔️</td><td>✔️</td><td>✔️</td></tr><tr><td>Color</td><td>✔️</td><td>✔️</td><td>✔️</td></tr><tr><td>Short name</td><td>✔️</td><td>✔️ five letters only</td><td>✔️ five letters only</td></tr><tr><td>Long name</td><td>️➖</td><td>✔️</td><td>➖</td></tr></tbody></table>

{% hint style="info" %}
If you configure a POI to show a pictogram, then color and short name are not shown for this POI.
{% endhint %}

![Design points of interest - select a pictogram or a color, short name (incl. emojis) and long name  ](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2Ffd3hcCOG7pqC5D1e4kXo%2Fscreenshot-racemap.com-2022.06.18-14_32_39.png?alt=media\&token=0e2e8402-c189-4468-a264-81b150ec39dc)

![Group: eight different race courses in one visualization](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2FF4HJI6wDTEZZvIN6jC52%2FGroup.gif?alt=media\&token=369bd29b-1696-48df-b2d4-5593b06d667f)

{% content-ref url="multi-event-map" %}
[multi-event-map](https://docs.racemap.com/live-tracking/multi-event-map)
{% endcontent-ref %}

**Viewport**: set the initial view of your tracking map spectators see when loading the map.

* Mapbox style e.g. terrain, satellite, hybrid, and dark, or choose custom map tiles
* Longitude and latitude of the center of the map,
* Zoom, direction, and pitch.

{% content-ref url="../tab-map/external-map-layer" %}
[external-map-layer](https://docs.racemap.com/tab-map/external-map-layer)
{% endcontent-ref %}

&#x20;

### Live, (net)replay & progress on track

Live and replay in the same tracking map with one URL, comprehensive visualization of activities from many athletes&#x20;

* geodata from everywhere (decentralized)
* geodata from any time

**Instant replay** during the running event. Skip back to watch early scenes of the race and go back to live stream. Exciting and useful information is easily accessible for the speaker, event staff, and spectators. Replay the recorded race in fast motion during and after the event.&#x20;

![click and adjust the replay factor, slide back to early scenes of the competition ](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2Fc1NOUOJXH3HeZHG1veSB%2Fslider.PNG?alt=media\&token=ae1d875c-c1a9-4dd6-aedd-81962092c521)

**Net replay** visualizes contests with differently starting athletes such as wave start or virtual race. Synchronize the recorded activities to replay all athletes together. Net replay simulates that all participants are together at the same time.

![Participants from a two weeks event are synchronized to the start location](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSRNxaH2Ju9Flr7JhJD%2F-MLitTAsBQX3ck7VwmT9%2F-MLitguJ4ZsHTGfQs9cN%2FVirtualRaceNettoReplayHD.gif?alt=media\&token=afbde482-9c1d-4df6-ba09-98238a026cb6)

**Progress on track:** Activities from everywhere are pinned to a specific track. That way the markers move on this track, virtually. Spectators understand easily who is heading and participants protect their personal data as their real locations are not visible.

![Activities from everywhere (left) displayed on one specific track (right)](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2F1UFLDwtP9x51zS9epk2g%2FPin%20on%20Track%20-%20Ping%20Pong%20-%20720x.gif?alt=media\&token=2d73b07e-d38f-43fe-a698-3c82d37d0084)

{% hint style="success" %}
Two maps from the same geodata with decentral locations:&#x20;

* Activity map showing the raw geodata <https://racemap.com/player/dam-tot-damloop-pin-track-10em_2020>&#x20;
* Progress map on a virtual racetrack <https://racemap.com/player/dam-tot-damloop-home-edition-10em_2020>
  {% endhint %}

### Options pinning the dots to the shadowtrack

![Race recap: grey flag (001) moving on the track, white flag (006) lost the racecourse and comes back to the track 200 m behind 001](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2FMqzDqwJ26jAEI5XgHsAR%2Fmagnetic-shadowtrack.gif?alt=media\&token=f6eac720-4c38-481f-a492-24e55810b349)

There are three options pinning flags to the track. Each option affects how dots are moving in the interactive map. Watch the above scene with differently pinned flags to the track.

* **Magnetic (NEW)**: Within a 50 m distance from the track the flags are pinned to the track. Geodata with 50+ m distance is shown as raw coordinates. The grey flag moves smoothly through the curve (pinned to the track) and the white flag is shown beside the track (raw data).
* **None**: The visualization shows the coordinates as raw data. Disadvantage: Due to +/- 25 m accuracy of GPS devices, the locations don't precisely match the track and the grey flag cuts the curve.
* **Always**: The visualization always shows all coordinates on the track. For that reason, the grey flag moves smoothly through the curve. But the white flag is pinned to the track, also. It is not possible to see that the white flag lost track.

### Navigation of **participants and points of interest**

{% tabs %}
{% tab title="Search & select" %}
![search and select in tracking map](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2F1bvXyB2oBgNzNHyqIkrU%2Fsearch_select.gif?alt=media\&token=1e0b2f55-7c68-47ad-baa2-83266839250b)
{% endtab %}

{% tab title="Hover" %}
![hover participantsnts & POIs in the list, elevation provile and in the map](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2F79zHFfGpNHBu6X7tMuaa%2Fhover_Racemap_tracking_map.gif?alt=media\&token=53773610-4763-499e-a66c-42df6cc38c0f)
{% endtab %}

{% tab title="Filter" %}
![filter participants in the visualization](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2FBRTYozwZE6CHRVdqQ38D%2Ffilter-tags_desktop.gif?alt=media\&token=515c1f3f-2f79-409c-9dba-02b0333842ec)
{% endtab %}
{% endtabs %}

* Filter and search participants and points of interest.
* An arrow moves on the track while hovering over the elevation profile.
* Selected participants are highlighted as a flag and the visualization centers automatically.&#x20;
* Select respectively hover athletes and points of interest in the list, in the map, and in the elevation profile.&#x20;

The **tail** feature shows the recorded activity of a selected participant. The length of the tail corresponds to the set duration. Purple tails for selected participants: [https://racemap.com/player/dam-tot-damloop-home-edition-10em\_2020](https://racemap.com/player/dam-tot-damloop-home-edition-10em_2020#selected=5f6b407642e62339d5c3de58,5f6b407942e6231b58c3e18b,5f6b407942e623c94bc3e0ce,5f6b407a42e6236575c3e25c)

![](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2FIMxt1BoIMzl7SbzEAWRe%2Fscreenshot-racemap.com-2021.11.05-20_53_39.png?alt=media\&token=d46cc478-cfc4-451c-88f3-f57078a48378)

Spectators can display the race numbers of all participants in settings (can be set as default in event builder, also).&#x20;

!["show all flags"-option in player settings](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2Flba332EcS0hQX207gdv0%2FUnbenannt.PNG?alt=media\&token=9c88fb63-70fb-41e0-a80a-4300c90b826e)

### Info tab, elevation, flow chart, statistics & leaderboard

{% tabs %}
{% tab title="Info" %}
![useful information about the event](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2FWufgNXyvLbS68UDQTtDM%2Finfo-tab.png?alt=media\&token=4234006b-7595-4020-99ea-95c2420b6221)
{% endtab %}

{% tab title="Elevation" %}
![interactive elevation chart with points of interest, up to 1,000 dots](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2Fr0Qm9eNB2N6JeWUB2krk%2Felevation-tab.png?alt=media\&token=e29cc308-b7e8-4f80-b2d2-ca32945354c7)

![or use the elevation chart as 1D progress line](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2F21YDvFFpxv1Qsv17eEyU%2Fscreenshot-racemap.com-2021.12.02-21_33_33.png?alt=media\&token=27648fd8-d2b4-4e75-bf3a-a410551b37b4)
{% endtab %}

{% tab title="Race flow" %}
![overtaken in a diagram](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2FRhTASNlrbPHE29X9dzEx%2Fraceflow-tab.png?alt=media\&token=1a6b819c-a86f-4484-a2ea-d3858ec9adee)
{% endtab %}

{% tab title="Statistics" %}
![distance (gap) and duration of selected participants](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2FNTAed3oHuYooUx2LyLc0%2Fstats-tab.png?alt=media\&token=4597e56e-a8e1-46d6-abef-cdb94971faf3)

real-time statistics for each participant:&#x20;

* distance to go and duration to finish (prediction),
* accumulated ascent & decent,&#x20;
* distance from start,&#x20;
* speed - (If there is a shadowtrack speed value based on mapping on the [shadowtrack](https://docs.racemap.com/live-tracking/shadowtrack) or average speed value of the ten latest received locations.),
* gap.
  {% endtab %}

{% tab title="Leaderboard" %}
![If the leaderboard is activated the visualization provides real-time scoring and results.](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2F85HiUoF0rAZ09Xj9aUOd%2Fleaderboard-tab.png?alt=media\&token=84329a57-2ccf-4bee-b47c-196a78179101)

{% content-ref url="gps-timing" %}
[gps-timing](https://docs.racemap.com/live-tracking/gps-timing)
{% endcontent-ref %}
{% endtab %}
{% endtabs %}

### Own location, distance marker & sponsor logo

**Own location** shows the location of your device in the tracking map, which is helpful for spectators and event staff at the race ground. Own location is visible on your device only and is not sent to our server.

![](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSRNxaH2Ju9Flr7JhJD%2F-MTofMuIG2F_mdj1q29Q%2F-MTog5jSAFwv3-P-oPWo%2Fscreenshot-racemap.com-2021.02.18-11_28_22.png?alt=media\&token=e55791dd-c51c-434a-a63e-1450f314f918)

![Dynamic markers display the distance on the shadowtrack depending on zoom.](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSRNxaH2Ju9Flr7JhJD%2F-MWdcTsKtzlseGDu4RCy%2F-MWdeRJQTZ2-7QgQ0EKx%2FUnbenannt.PNG?alt=media\&token=83d1e276-dc0f-4f45-ac13-b9e90f856151)

If the **sponsor logo** is activated you can show a square logo and refer to the sponsor's website.

![](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSRNxaH2Ju9Flr7JhJD%2F-MKkHlV7LuORn8NVpCdm%2F-MKl0HJV8Tem0R28M6CE%2Fsponsor_logo.png?alt=media\&token=4803fc3a-fbff-4f41-8479-bcc595b557e6)

The slider shows either the duration of the event or the time of the day in two moveable scales. The foreground represents the total duration of the event from start to end to quickly slide through the total event. The scale above shows a section of the total event duration. Zoom this scale to show 5min or 2hr depending on how accurate you want to place the time in the visualization.

![two scales slider optimized for mobile usage ](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2Fv0puGIUm4jf58LfpGvzB%2Fzoom%20slider.gif?alt=media\&token=ceb3e745-65c9-4e72-8180-015d44c8e53e)

&#x20;

![](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2FsV3vL6Esz71ATSTZrtRv%2Fslider-eventtime.png?alt=media\&token=93ef33e7-faa4-4c44-8d01-bb2416fdd405)

![](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2FKM1QRLwNqcMv0MCY6xSw%2Fslider-time_of_day.png?alt=media\&token=898348e3-8c45-485c-a9ad-7119969ea598)

![upcoming events show a countdown until start time of event ](https://1672210197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSRNxaH2Ju9Flr7JhJD%2Fuploads%2FYBSiyjliDmTHUM4CXYdd%2Fslider-upcoming.png?alt=media\&token=29a03727-0641-4fcc-af30-321dab11caaf)

&#x20;
