Fun with geospatial data
Geospatial data from a jaunt around the coast
Hiking along the coast and having a little fun with GPS tracking data
By Combiz Khozoie |
28 Apr 2022
∙
3 minute read
IMG_20220419_125554_1300x

Near Kelsey Head—spot the seals!

With work closure for Easter, it was time to head into the great outdoors and enjoy a break outside the city. We chose a small section of the South West Coast Path—one of the 19 National Trails. The coastal walk from Padstow to St Ives took six days, covering ~110km, taking in beautiful sea views, spring wildflowers, and salty sea air.

Each section of the trip was tracked on a GPS watch—one per day—producing six separate tracks. Combining these tracks into a single contiguous multi-day trip associated with geo-tagged photos isn't currently supported by Strava, so it was time to inspect the raw data and take a DIY approach.

GPX to GeoJSON

The raw data were stored in GPS Exchange Format (GPX) files, an open-format XML schema commonly used in tracking devices. Each file included a single track segment comprised of multiple sequential waypoints (latitude, longitude) with tags including elevation, date-time, and heart rate.

<trkseg>
    <trkpt lat="50.346251679584384" lon="-5.155571429058909">
        <ele>-9.4</ele>
        <time>2022-04-24T01:36:57.963Z</time>
    </trkpt>
    <trkpt lat="50.346145145595074" lon="-5.155440839007497">
        <ele>-8.2</ele>
        <time>2022-04-24T01:37:08.963Z</time>
    </trkpt>
</trkseg>

I combined the GPX files into a single GPX file with multiple tracks and then converted this to the GeoJSON format for improved data wrangling and visualization support.

Data wrangling

Data optimizations removed extraneous data to improve downstream visualization speed and download time. Firstly, the date-time, elevation, and heart rate data were dropped (11.3 MB GPX to 1.7MB JSON). Secondly, the high update rate of one waypoint logged every few seconds was reduced by ~8x (i.e. one waypoint log every minute or so), reducing file size further (1.7 MB to 224 KB).

The GeoJSON file included each GPX track as a polygonal chain or LineString feature. I combined these into a FeatureCollection, with one LineString per day. Annotation of each feature with JSON properties allowed the inclusion of additional data for visualization, such as the distance and the start and end locations.

{
    "type": "Feature",
    "geometry": {
        "type": "LineString",
        "coordinates": [
            [-5.155571429058909,50.346251679584384], 
            [-5.288489554077387,50.26155455969274]
        ]
    },
    "properties": {
        "trip": "SWCP 2022",
        "day": 4,
        "start": "Perranporth",
        "end": "Portreath",
        "distance": 20.77,
        "distance_units": "km",
        "color": "#ffff99"
    },
},

Adding geotagged photos

A new FeatureCollection of GPS coordinates—or Point geometries in GeoJSON parlance—was created to include geotagged photos. Additional data, including the image URL and description text, were appended as JSON properties.

{
    "geometry": {
        "type": "Point",
        "coordinates": [-5.25271,50.28056]
    },
    "type": "Feature",
    "properties": {
        "trip": "SWCP 2022",
        "popupContent": "Near Nancekuke",
        "image": "https://bucket.s3.amazonaws.com/media/somephoto.jpg",
    },
},

Visualizing with Leaflet

I used the capable and compact Leaflet open-source JavaScript library to generate an interactive visualization from the prepared GeoJSON FeatureCollections (GPS tracks and geotagged photo coordinates).

Map construction included three layers: (1) a tileLayer of map tiles sourced from ThunderForest with an emphasis on the outdoors, (2) a hikingLayer, and (3) a photosLayer. Finally, a pop-up function enabled the display of relevant data for a feature when clicked. Try it out below:

GeoJSON tutorial - Leaflet

Future work

This ad hoc visualization was for fun, but there's considerable scope for enhancements. Here the elevation data was omitted due to an uncalibrated altimeter. But together with heart rate, these data could elevate (pun intended) the visualization and enable interesting analyses analogous to those used by popular fitness apps.

This visualization was semi-automated, using JS code and online tools. Packages such as Folium (a Python wrapper to Leaflet) could enable fully-automated analyses and visualizations. Full automation would be an excellent place to start part II.. (TBC)

Tags:
geospatial visualization JS map

Return to home