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 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
Cheers,
Steve.
https://imhaIvknr@cEv@oA\i@Xq@f@g@~@mArAYP}AjAm@ZqAZ_Ct@Hf@Tl@tGhM|@jAoAzDWjAS|Aa@tHMfGG~@MA_BrFOv@El@D
CtAGT@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 ). 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.
Hey @pork1977gm awesome job on the plugin, Im looking to do both encoding and then decoding, i have an array of lat lng’s and would like to encode the resulting polyline for simpler storage and then decode it for display. Is your plugin capable of doing this?
Hi @aestela,
Thank you!
So yep that’s possible, although…
When you say, for simpler storage, drawing a polyline back onto the map only requires a text string of lats/lngs so you can’t get much simpler than that in regards to storage, unless your polylines are rather long and the coordinates are just huge!
I have an action in the plugin right now, called “Decode polyline” but there isn’t one called “Encode polyline”. I created this because of the data which comes out of a request to the directions API was returning an encoded polyline. I never thought that anyone might actually want to decode their own polylines within the plugin (which is a good idea) so I’ll add an action in to do this.
Can you screenshot and send me the array of lat/lng which you have now, and I’ll use them to test the new encode action with.
I’m a bit tied up for the next couple of days but I’ll let you know when the update is pushed.
Paul
Hi @aestela
I’ve just pushed an update which should allow you to do this now.
[PLUGIN] - Google Maps Geometry/Drawing + W3W - Showcase / Plugins - Bubble Forum
Do you want to try it and see how you get on? It was quite a large update because of there being so many events/states in this plugin there was quite a bit to consider.
In regards to what you need to access, after a shape has been drawn onto the map, through either use of the drawing tools or via the actions, you’ll automatically get the encoded shape data stored in the ‘encoded shape coordinates’ state. You’ll want to save this when the shape is drawn to your database.
When the time comes to redraw the shape back onto the map, set this option as shown below to Yes and put the encoded data into the coordinates field.
I’ve allowed both the “Draw shape” and “Draw list of shapes” actions to work with this. Any updates made to a shape after that, i.e it’s moved, vertices changed, rotate, split, merged etc… should get the encoded data also updated. You’ll need to tap into the various events to save it appropriately but just give me a shout if you see any errors or run into any troubles.
Note: You can only encode polylines and polygons, so if you’re going to be working with rectangles and circles, then you’ll probably want to be storing the shape type to your database as well. You might want to set up an option set called “shape types” and give it the 4 supported values - polygon, polyline, rectangle, circle. Then you can have a field assigned to that option set and use it conditionally for the ‘use encoded data’ field - i.e. yes would be if option set is polyline or polygon, and no would be when circle or rectangle, then your coordinates field you can always store either the normal coordinates or the encoded string. Or you can convert any shape to a polygon if really needed.
I’ve tested most of it and all seems to be working well (I haven’t tested the list of shapes action but it should work!). Let me know how you get on, as it would be really helpful if you could test this out for me!
Speak soon,
Paul
@pork1977gm wow! great job! I’ll test it out asap and let you know.