Get Strava Activity polyline altitude

Question

I am using the Get Activity ById endpoint from the Strava API whcih returns a ActivityDetail object.

I can decode the polyline but it only returns the lat and lng values for each vertex.

I decode using:

import polyline from '@mapbox/polyline';
import { LatLngExpression } from 'leaflet';

export const decodePolyline = (
 encodedString: string | undefined,
): LatLngExpression[] => {
 if (!encodedString) return [];
  const decoded = polyline.decode(encodedString);
  return decoded;
};

I would like to get the altitude in order to draw the elevation graph too. Is there a different API call available to retrieve this data?

If your interested the repo Imj workin in is here: https://github.com/loanburger/strava-react-app

Thanks!

Answer 1

I have found another solution to this problem and wanted to share the approach. There is a ActivityStream API which can be used. It takes in the activity Id and the stream type you want then returns a stream result with the types you want:

• time: An instance of TimeStream.
• distance: An instance of DistanceStream.
• latlng: An instance of LatLngStream.
• altitude: An instance of AltitudeStream.
• velocity_smooth: An instance of SmoothVelocityStream.
• heartrate: An instance of HeartrateStream.
• cadence: An instance of CadenceStream.
• watts: An instance of PowerStream.
• temp: An instance of TemperatureStream.
• moving: An instance of MovingStream.
• grade_smooth: An instance of SmoothGradeStream.

A sample response for example the distance stream would look like:

[{
  "type" : "distance",
  "data" : [ 2.9, 5.8, 8.5, 11.7, 15, 19, 23.2, 28, 32.8, 38.1, 43.8, 49.5 ],
  "series_type" : "distance",
  "original_size" : 12,
  "resolution" : "high"
}]

This basically gave me exactly what I was after.

Answer 2

I had the same problem as you (also trying to get elevation data for Strava segment polylines) and solved by making a request to Google's Elevation service using their elevation javascript API.

If you want to use Google's service, you'll need to sign up (for free unless you're making lots of requests) to Google's maps service to get an API key and then reference their js file:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
</script>

Then get your decoded polyline from Strava, pull out the coordinates and request the elevation for the coordinates from Google. This is what I did:

/*
Get your decoded polyline from Strava (formatted as follows)
[
   {
        "latitude": 55.13186,
        "longitude": -6.0442
    },
    {
        "latitude": 55.13202,
        "longitude": -6.04401
    }
]
*/
const segmentCoordinates = segmentPolylineDecoded;

// Change polyline into correct format for request to Google
let routeCoordinatesInCorrectFormat = segmentCoordinates.map(function(x) {
  return { lat: x.latitude, lng: x.longitude };
});

let elevationData;

const elevator = new google.maps.ElevationService();
elevator
  .getElevationAlongPath({
    path: routeCoordinatesInCorrectFormat,
    samples: 256,
  })
  .then(({ results }) => {
      elevationData = results;
      plotElevation();
  })
  .catch((e) => {
    // error
  });

The response from Google comes back in the following format:

[
    {
        "elevation": 14.16793346405029,
        "location": {
            "lat": 55.13186,
            "lng": -6.0442
        },
        "resolution": 610.8129272460938
    },
    {
        "elevation": 14.90726280212402,
        "location": {
            "lat": 55.1321392922906,
            "lng": -6.043826473467345
        },
        "resolution": 610.8129272460938
    }
]