TrekMapper
Your personal activity heatmap

Visualize your adventures with CubeTrek's TrekMapper, revealing your most frequented spots across the globe. Zoom in to unveil each activity and click to uncover the details behind every activity.

All your uploaded activity files (GPX and FIT-Files) are visualized on an interactive map.
Zoom from a global heatmap to single activities in fine-grained detail. Filter by activity type.


How to get started

  • Step 1: Get a CubeTrek account

    Register for a new account. It's free, and you only need to provide a username and email address.

  • Step 2: Get your Activity Files

    CubeTrek accepts FIT files (e.g. from Garmin, Polar, Suunto devices) and GPX files.

    See here for instructions on how to download all your files from your Strava or Garmin account (bulk download).

    You can also connect your Garmin or Polar account to CubeTrek to automatically sync from your device.
    Please note: this will only sync future activities, past activities need to be uploaded to CubeTrek manually.

  • Step 3: Upload your files

    Login to CubeTrek and upload your files, one by one or upload an entire ZIP archive.

  • Done

    Check out your personal TrekMap here.

For the technically inclined people, here's a short summary of the underlying tech stack used by CubeTrek.

The Back End is constructed with Java and Spring Boot backed with Postgresql (and Postgis), the Front End is based on Bootstrap. Good old plain JavaScript is used for interaction with the server.

The actual 3D magic is performed by the awesome Babylon.js library (check it out, if you've never heard of it), the graph is handled by D3.js (very versatile, but a steep learning curve), the 2D map is rendered with MapLibre GL JS (which is very straightforward to use in this particular case).

So here's what happens when you upload a FIT or GPX file: the server reads the tracks, downsamples them to a reasonable resolution and calculates some descriptive values (such as the geographical bounding box, distance, time, etc.).
The elevation data is cross-checked with the elevation model on the server. This is done to check if the device's height sensors were propely calibrated and a simple correction is applied if necessary. If elevation data is completely absent in the file (because the recording device doesn't have a height sensor) the elevation data is interpolated completely from the model.
The elevation model consists of HGT files retrieved from the NASA SRTM dataset.

To guess the activity name, we take the highest point in the track data (making the assumption that this is the most prominent point of the whole activity, e.g. the summit). This is cross-checked against a peak database on the server. The data comes from OpenStreetMap and contains all OSM features annotated as 'Peak', and contains >520k entries.
If there's no peak in the vicinity, a reverse geocoding request is sent to Maptiler.

Once all the data is gathered, it's stored in a PostGIS extended PostgreSQL database and the activity is ready be to put on the spotlight.

When you view the activity in the 3D viewer: the server provides two key files for each activity. An extended GeoJSON file, describing the track latitude/longitude data, time, and elevation data. A gLTF file which contains the 3D Model of the topography. Babylon.js is used to display the gLTF file and loads the texture (map tiles) from Maptiler.
A custom script than draws the track on top of the texture of the 3D model.
The script also handles the D3.js graph data conversion from the GeoJSON file, the mouse interaction etc.
The 2D map is very straightforward: just show the GeoJSON data in a MapLibre map (again using Maptiler as source for the map data).

When you view your heatmap (TrekMapper): The server provides a list of the center coordinates for every track associated to your account, which in turn is rendered by MapLibre GL JS to a heatmap. See MapLibre's Heatmap example for details.
In high zoom levels, the script requests a simplified GeoJSON for each track within the view, which are displayed in their own layer. Simplified means that the track resolution is downsampled quite significantly and no further information (i.e. no altitude data) is provided.
This makes the number of displayed coordinates on the user device more manageable, with the downside of noticeably simplified tracks when completely zoomed in.
After clicking on the map, Turf.js is used to determine the closest track.

Get CubeTrek now

Sign up