1

I'm rewording a question I asked earlier in hopes that it will get me some feedback.

I need to generate a static map from Mapbox that shows two end points and the polyline route between them. The method outlined below is what I'm using. It sometimes works and sometimes doesn't--and that is what's driving me crazy.

First, I use the two GPS end points to make an API request that generates the polyline. Then I use a second API request with the two end points and the polyline to generate the static map. The first part always seems to work. I get an encoded polyline that I can run through an online decoding tool and it shows the various points along the path just fine, but the second step to generate the map from Mapbox sometimes gives me the expected map and sometimes gives me an error code. The code is usually {"message":"Not Found"}, but sometimes I get a {"message":"Not Authorized - No Token"} error code.

I use this API with the two end points to get a JSON file that has a polyline: https://api.mapbox.com/directions/v5/mapbox/driving/POINT1;POINT2?access_token=TOKEN

Then, once I have the polyline, I am using this API to generate the map:

https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-a+9ed4bd(POINT1),pin-s-b+000(POINT2),path-5+f44-0.5(POLYLINE)/auto/500x300?access_token=TOKEN

This works fine...

Point 1 = -87.321536,36.584454

Point 2 = -104.793676,38.749513

Polyline = }kh~Ez{}sO|HUuHmj@uhHbOyAla@kisAdelC|aMf~w@egO|uaAahfBr{|@w_@sAozkCcwFsp@v]__w@hjFjf@bdCkaJhmzAiyXtzb@fJ|{@{p[|~yErtBdacE{x^vkvHrZfuKo[tpBfxSrcuBocGpi_AqhCvjb@wgAvfsDhyc@fkrD~mD~bkDayD~ywCsui@vjmEoyBpk|AiOhHrvEdueApda@huoA|v[zuhFsySvwaAvbDwqHxXpwDYj@riJULheEfXh^tdAj~I^gIhAkEY~@kHseBlGyC^kA

Map API request = https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-a+9ed4bd(-87.321536,36.584454),pin-s-b+000(-104.793676,38.749513),path-5+f44-0.5(}kh~Ez{}sO|HUuHmj@uhHbOyAla@kisAdelC|aMf~w@egO|uaAahfBr{|@w_@sAozkCcwFsp@v]__w@`hjFjf@bdCkaJhmzAiyXtzb@fJ|{@{p[|~yErtBdacE{x^vkvHrZfuKo[tpBfxSrcuBocGpi_AqhCvjb@wgAvfsDhyc@fkrD~mD~bkDayD~ywCsui@vjmEoyBpk|AiOhHrvEdueApda@huoA|v[zuhFsySvwaAvbD`wqHxXpwDYj@riJULheEfXh^tdAj~I`^gI`hAkEY~@kHseBlGyC^kA)/auto/500x300?access_token=TOKEN

Map (yay!)

This does not work...

Point 1 = -87.321536,36.584454

Point 2 = -85.855218,37.690038

Polyline = }kh~Ez{}sO|HUtCurC}xCkhC}~BqvIuc_@o~l@oaI}aUrs@kkL}~Iso\qHoyGsiKaTpQcRdlGusK_DEiz@w^cwOakJurAizT{hCugF_bBenSsOclZkdCw]mgEwyDogLgfBatEubCmkGxa@icLe_Do_Spf@cw]}sEgOaDgT{[zFyIk~Bts@

Map API request = https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-a+9ed4bd(-87.321536,36.584454),pin-s-b+000(-85.855218,37.690038),path-5+f44-0.5(}kh~Ez{}sO|HUtCurC}xCkhC}~BqvIuc_@o~l@oaI}aUrs@kkL}~Iso\qHoyGsiKa`TpQcRdlGusK_DEiz@w^cwOakJurAizT{hCugF_bBenSs`OclZkdCw]mgEwyDogLgfBatEubCmkGxa@icLe_Do_Spf@cw]}sEgOaDgT{[zFyIk~Bts@)/auto/500x300?access_token=TOKEN

No Map :-(

This is a small part of a much bigger project where I am automating the process for generating project reports, but the problem isn't with my jQuery/AJAX code. It's a problem with my APIs and/or Mapbox. If there is a better/faster/easier way to get these maps, then I am absolutely open to suggestions, because this does not seem like the most efficient way to do it. I will be generating these reports from a computer. I am not worried about bandwidth or scaling down for a phone application. The file can be as cumbersome as it wants to be as long as I can consistently generate a map every time.

Matthew
  • 139
  • 1
  • 10
  • 2
    Are you actually URL encoding the polyline in the API request? It's not clear. – Steve Bennett Dec 31 '20 at 11:11
  • I was making two API requests to Mapbox. The first just used coordinates and returned the encoded polyline. The second used the coordinates and the polyline from the first API to return a map with a route. Unfortunately, as riastrad pointed out below, that polyline contains special characters that was screwing up the URL. Once I scrubbed those characters out, it fixed the problem. – Matthew Jan 01 '21 at 19:13

1 Answers1

3

Steve's comment hints at the right solution, but just to make it absolutely clear - this is happening because you are not properly encoding the path polyline in your request. Polylines in particular have a nasty habit of including reserved characters that will break URIs unless properly encoded at the time of the request.

When I encode the polyline portion of your path overlay with a simple tool like url encode decode, I'm able to make your request work as expected:

https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-a+9ed4bd(-87.321536,36.584454),pin-s-b+000(-85.855218,37.690038),path-5+f44-0.5(%7Dkh~Ez%7B%7DsO%7CHUtCurC%7DxCkhC%7D~BqvIuc_%40o~l%40oaI%7DaUrs%40kkL%7D~Iso%2FqHoyGsiKa%60TpQcRdlGusK_DEiz%40w%5EcwOakJurAizT%7BhCugF_bBenSs%60OclZkdCw%5DmgEwyDogLgfBatEubCmkGxa%40icLe_Do_Spf%40cw%5D%7DsEgOaDgT%7B%5BzFyIk~Bts%40)/auto/500x300?access_token=MAPBOX_ACCESS_TOKEN

⚠️ disclaimer: I currently work at Mapbox ⚠️

riastrad
  • 1,624
  • 10
  • 22
  • Thanks you riastrad. This has been driving me nuts for weeks. I was in the process of writing my own algorithm to convert coordinates to polylines manually. I am both happy and sad that the fix is so easy. This solved my problem. I noticed that when I put the api into google it made several changes (i.e. { to %7B), but I erroneously assumed that since it made some changes that it was making all the needed changes. Thank you for setting me straight. You can tell your buddies at Mapbox that they can disregard the e-mail I sent to IT. – Matthew Jan 01 '21 at 19:06
  • Any idea which characters were problematic? I didn't see any `?` for instance. Maybe `\\`? – Steve Bennett Jan 01 '21 at 23:13
  • Yes, Steve. The back slash was getting changed to a forward slash, the tilda ~ and the accent ` were problematic as well as some other characters. I am trying to make these API requests automatically through jQuery. Ultimately what solved my problem was taking the variable with the polyline and using this line of code to scrub out all the unfriendly characters... polyline = encodeURIComponent(polyline); – Matthew Jan 04 '21 at 23:43
  • @SteveBennett yeah, it's the \`\\` which seems to be coerced into a \`/\` by the browser (and possibly other clients?) if you don't encode it to `%5C` before making the request. If you encode only that character the request works as expected. – riastrad Jan 14 '21 at 22:05
  • @riastrad - That URL works fine when polyline data is small. But when polyline encoded string gets huge.. this doesn't work. Can u suggest alternate solution of POST request to get the static image? thank you – idleMind Dec 04 '21 at 09:41