Mapbox API requests for Static Map and Polyline

1.6k views Asked by At

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.

1

There are 1 answers

5
riastrad On BEST ANSWER

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 ⚠️