Show HN: 3D Topography of Your GPS Track
cubetrek.comAs a hiker and (ski)mountaineer I've always been a bit disappointed of how most apps fail to properly depict the topography while analyzing GPS tracks. (I know that Strava offers some kind of 3D view by now, but I still wanted to build my own thing)
That's why I started working on https://cubetrek.com
It's still very experimental, but you can give it test-drive now. Any feedback appreciated.
It essentially renders your GPS Track as a 3D model within the topography. As an example, here's the Bishorn, a 4000 m peak in Switzerland: https://cubetrek.com/view/5807
The front end is based on Babylon.js, D3.js, the back end is Spring Boot and Postgresql with PostGIS. There's a summary on how it works at the very bottom of the homepage.
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, 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).