Display Polyline Route on Map

Hi folks! I want to show a route on a map, the route is a Polyline (generated by www.strava.com) - anyone any ideas how to do this via the google map plugin or mapbox?

Thanks,
Steve.

Hi Steve, I have an action that does this inside a maps plug-in I have. It’s been configured to work using the JSON returned from a Google directions call, but depending on the structure of your data, I could perhaps make some adjustments to make it work with what you have.

What does the response look like from strava?

https://paul-testing-4.bubbleapps.io/what_3_words

The above demo page (a little cluttered) has 4 blue buttons at the top, hit the one of the far right and scroll down the page.

Is it that type of thing you need?

Hi Paul,

Thanks for the response man - really appreciate it! Those line routes look good but no idea how you get those route co-ordinates from the polyline info returned by Strava (I vaguely understand this is some sort of codification that google does to store the route data).

I have pasted in one of the polylines that Strava is returning for a route. I am also crossing my fingers that this makes any sense whatsoever :laughing:

Cheers,
Steve.

https://imhaIvknr@cEv@oA\i@Xq@f@g@~@mArAYP}AjAm@ZqAZ_Ct@Hf@Tl@tGhM|@jAoAzDWjAS|Aa@tHMfGG~@MA_BrFOv@El@DCtAGT@tBjAZ}Ib@mHtDw@Xf@Jj@f@rBh@pBNX^rAXtAFl@An@Dt@Ex@[lCg@hH]hDQbEGjC]vCAb@Fv@BtAEv@i@lCa@dBm@rFS~Fy@hFMbBOtAY|AM|AQrKN|C?jAMfDc@dECrAaArFCd@FzDAl@_@jAs@fBaAlBkNt[vAlAbBPrBl@BRHNNJZJbHlEjAXtBZf@IvD[fDw@xAqAnA]pAIzA[|@Hl@[r@ItAHfASx@SdABvAt@xArAf@RAR~AFBuJu@{GW_FW{Aq@uAcAiFyBgSw@gGScCuAuJs@_NDoBJUJWx@_Ap@aAd@y@_@gBaA{CwBqIK{@MiFKaAqBiMgA_IkAmJe@oGu@eOW{AWaAs@sAOi@_AyFoAwGWgBGw@CoEi@Gq@FwAd@yAZi@rA}@kAuGiMUm@Ie@~Bw@pA[l@[|AkAXQlAsAf@_Ap@g@h@YnA]Ew@

No probs. So that data is an “encoded polyline”.

I have an action inside the plug-in that’s capable of decrypting it via use of a method that’s built into the Google Maps API. It extracts the coordinates data and put them into a state where you can then feed into a “Draw shape” action to plot the points onto the map.

A bit later (or tomorrow) I’ll test it for you to just make sure it works with this data, because I’ve only tested it with the same type of encrypted data that comes out of the Google Directions API.

Paul

Hi Steve,

Take a look here: Test Page

Here’s the editor link: Paul-testing-4

There’s 2 buttons on that page and a map. The first green button will decode the polyline data and populate a state which makes up all the coordinates. The second buttons draws it onto the map.

It shows this

One thing to note, is that in your original encoded string you sent, it starts with https://
That needs to be removed.

WOW!!! Just rushing out the door here on the school run, but had to drop a quick one to say thanks a million!!! Will get stuck into it today but it looks like you have done something I considered a huge long-shot bordering on impossible, massive kudos! Speak in a bit, thanks again Paul!

No probs! Hope it helps!

Hi Paul,

That looks really good - very simple (well, very simple to use, I am sure not so simple to build :laughing:). I can see how I would implement it (I think!).

One thing I’m not sure about is that it will be used within a repeating group - is that possible (i.e. to create a map in each cell without the user hitting any additional buttons)? Each cell will have a separate activity pulled down from Strava. Screenshot mockup below might make it clearer. Actually, maybe I should hold off asking more until l instal and play around with it…

I can see the What3Words(Search) plugin and have installed it but I think I need the What3Words(Maps) plugin and I don’t see that in my plugins - can you let me know how to get this and how much it is?

Cheers,
Steve.

Fek - one other thing I meant to ask - is it possible to extract the first co-ordinate (the start point) or to pull that out separately?

Ta!
S.