Strava API - How to get route image

Question

Does anyone know how to get finish route map image after users post their activity on Strava. I have read Strava API document, but I haven't found it yet

I use https://strava.github.io/api/v3/activities/:id to get an activity, there is "map" field, but I still not find out this field description.

Thanks everyone.

Answer 1

Strava takes the set of lat/longs recorded, and encodes them using the GOOGLE POLYLINE ENCODING algorithm. This is in order to reduce the data transmitted through the APP and the WEB SERVICE.

If you need to draw the route, you need to

1. Take the polyline string.
2. Decode it to get an array of lat/lon.
3. Loop through the array and draw the polyline on the maps.

I used the @mapbox/polyline npm module to decode the polyline in javascript.

Another, and a better way to do that is that you use the google maps static api. Where you will input a polyline, and get an image with a route drawn. The static api will look like

https://maps.googleapis.com/maps/api/staticmap?size=600x300&maptype=roadmap&path=enc:GIVE_YOUR_POLYLINE_DATA&key=GIVE_YOUR_API_KEY

Answer 2

The summary_polyline can be decoded into a set of coordinates. The algorithm used for a polyline is described here and lots of libraries can handle it.

You can also use the Google Maps static API for example without decoding.

This Ruby code from a slack bot for Strava does it all.

Answer 3

I have a working strava app you can access here: https://github.com/loanburger/strava-react-app

Using the map box you can decode the geometry data easily for example:

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

The app in this repo uses uses both the summary line and detail lines.

Answer 4

For getting the Route image in Android:

1. Add your all Lat and Long into a List and after that convert your complete list of lat and long into encoded poly line string with the help of Google Poly line Encoding techniques.

2. After that create Map box account and use static image API of map box with valid token

3. Now use StaticPolylineAnnotation:

List<StaticPolylineAnnotation> list = new ArrayList<>();    
list.add(StaticPolylineAnnotation.builder()
    .polyline(polilineString)
    .strokeWidth(1.0)
    .strokeColor(56, 69, 181)
    .build()); 

Note: PolilineString is your encoded string got from Google Poly line Encoding techniques

4. Create a MapboxStaticMap:

MapboxStaticMap staticImage = MapboxStaticMap.builder().user("mapboxaccountusename")
    .accessToken("Mapbox Token")
    .styleId("Your Style id")
    .staticPolylineAnnotations(list)
    .cameraAuto(true)
    .retina(true)
    .build();

5. Get url of image using

String imageUrl = staticImage.url().toString();