I'm trying to come up with a new static map solution and the recent Mapbox Static API with overlays announcement was very encouraging. I'm trying to change the fill and stroke color of the geojson overlay polygon, but it is giving me no token errors.
This API call works, but has default gray polygon.
https://api.mapbox.com/styles/v1/mapbox/streets-v10/static/geojson({"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}},"features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-117.505591431173,34.4089075642989],[-117.503997193676,34.4075750663843],[-117.504055132217,34.4009647268112],[-117.500461194723,34.3998682705629],[-117.497933256185,34.3937311664058],[-117.502860962427,34.3754772112258],[-117.50558687284,34.3699187924844],[-117.500602708264,34.3690095487358],[-117.498622995767,34.3762887924745],[-117.493075073901,34.3793322987198],[-117.491809173903,34.3744899206023],[-117.491309486404,34.3646389497843],[-117.487948202034,34.3576783143784],[-117.487998114534,34.3537783216761],[-117.478346935382,34.3440036966913],[-117.474862003096,34.3434764831504],[-117.470264885395,34.3473216925195],[-117.467523746857,34.351661828971],[-117.464679122903,34.3591621112511],[-117.461595340616,34.359847395625],[-117.460338986452,34.3645301737428],[-117.456920867707,34.3672235018636],[-117.449540309385,34.3686626331113],[-117.450829448966,34.3624645789543],[-117.439070648985,34.3631776810365],[-117.433846966701,34.3680488737373],[-117.432304411495,34.3657114383242],[-117.435435741699,34.3619535018718],[-117.430364636498,34.3610854747898],[-117.429725035458,34.3571108227126],[-117.432466176078,34.3542326279254],[-117.42899406775,34.3509432623055],[-117.430746804206,34.3445234446071],[-117.423460317759,34.3353308706631],[-117.418004315684,34.3431395498176],[-117.409438257364,34.3427112466933],[-117.404631747997,34.3379047342007],[-117.415756204229,34.3269630227594],[-117.416422453187,34.3232510644318],[-117.424179494841,34.3239173144308],[-117.42903359275,34.3188728581886],[-117.436314743781,34.3157795581934],[-117.438313490653,34.3226324060994],[-117.444457680226,34.3216258238093],[-117.44514783335,34.3161650925678],[-117.448036017721,34.311740254033],[-117.453386893754,34.3108257727844],[-117.460087542702,34.3010871957162],[-117.453073457296,34.2926208696877],[-117.45375166667,34.2797333009577],[-117.451013242716,34.2729190905516],[-117.454159965628,34.2688685603496],[-117.458043247914,34.2667761843111],[-117.459194967703,34.2588415103651],[-117.46174202395,34.251637752043],[-117.452742377088,34.2454239530943],[-117.45169541459,34.2429493135148],[-117.457901051039,34.2391802478957],[-117.466056884359,34.2418195176832],[-117.470746744769,34.2450562905948],[-117.477360042675,34.2466028437175],[-117.48161078121,34.2455629072608],[-117.488007408284,34.2486283082977],[-117.487972986409,34.2583966666158],[-117.493280691609,34.2611440801532],[-117.495450431189,34.2602926957795],[-117.504174900967,34.2645906655645],[-117.514916559284,34.266652591603],[-117.51408226866,34.2754615499227],[-117.522317607189,34.2833453894938],[-117.526552848849,34.2891600582348],[-117.530198444677,34.2917064759391],[-117.53858403633,34.2924694123963],[-117.541401316534,34.295610300933],[-117.549087691522,34.2983951092621],[-117.551278791519,34.3012011165494],[-117.559262951923,34.3052488352931],[-117.561604795669,34.304276124878],[-117.560623337338,34.2994490571771],[-117.563654137333,34.2953153457252],[-117.567567673785,34.2948587936426],[-117.577040915437,34.3007832478],[-117.5795855696,34.3049291488352],[-117.587632651879,34.3116749894498],[-117.594633417493,34.3135381456969],[-117.596712463323,34.3166056050671],[-117.58708653938,34.3165332071506],[-117.573801475859,34.3188939227719],[-117.572169766486,34.327639570675],[-117.567292472744,34.3337109977489],[-117.571073641488,34.3392651956569],[-117.575423038356,34.3386480487829],[-117.589770184167,34.3430636091927],[-117.59757481853,34.3422545914856],[-117.599002493528,34.3472276654363],[-117.607382769557,34.3540138123007],[-117.606868002891,34.3590996487512],[-117.604045666437,34.3620477195799],[-117.603081102897,34.3704528549836],[-117.599023243528,34.3702281716506],[-117.594265724785,34.3766305320573],[-117.588223536253,34.374472493519],[-117.584092038343,34.379636521636],[-117.581102591473,34.377474569556],[-117.573375699818,34.3773040528896],[-117.570039694615,34.3725784424802],[-117.559303566506,34.3654400601997],[-117.550623293603,34.3646120081176],[-117.550080776937,34.3620707424965],[-117.545233724862,34.358566848752],[-117.538103833206,34.3639164070771],[-117.539093688413,34.3705788976917],[-117.543890682155,34.370807326858],[-117.545946535277,34.3754520341425],[-117.539548155079,34.3737792153951],[-117.529636722802,34.3695633581099],[-117.527753298847,34.3720768789394],[-117.534549918628,34.3751972237262],[-117.538075823831,34.3753010758094],[-117.545654848819,34.3791448914284],[-117.547833007149,34.3821774018404],[-117.545407677986,34.3854094320437],[-117.538081715498,34.3874700257905],[-117.535005608211,34.3902871466194],[-117.530183142593,34.3900695320364],[-117.526193772808,34.3823873528817],[-117.522033505106,34.3836218299631],[-117.516013469699,34.3911091997431],[-117.517845655112,34.3938931674472],[-117.516417978031,34.3970816445255],[-117.512111155121,34.397628921608],[-117.509232006167,34.3941787028634],[-117.506448038463,34.3967009309845],[-117.504782415549,34.4031016809745],[-117.506923928046,34.404910070555],[-117.505591431173,34.4089075642989]]]},"properties":{"stroke-width": 2,"fill-opacity": 0.5}}]}),pin-s+ff0000(-117.60778,34.32577)/auto/600x400?access_token=pk.eyJ1IjoicmVkem9uZXNvZnR3YXJlIiwiYSI6IkNKNXhPNkUifQ.yPI1bZL3nEvDFbdQjeTB-A&before_layer=road-label-small
This API call, which is the same except for trying to add fill and stroke color, fails:
https://api.mapbox.com/styles/v1/mapbox/streets-v10/static/geojson({"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}},"features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-117.505591431173,34.4089075642989],[-117.503997193676,34.4075750663843],[-117.504055132217,34.4009647268112],[-117.500461194723,34.3998682705629],[-117.497933256185,34.3937311664058],[-117.502860962427,34.3754772112258],[-117.50558687284,34.3699187924844],[-117.500602708264,34.3690095487358],[-117.498622995767,34.3762887924745],[-117.493075073901,34.3793322987198],[-117.491809173903,34.3744899206023],[-117.491309486404,34.3646389497843],[-117.487948202034,34.3576783143784],[-117.487998114534,34.3537783216761],[-117.478346935382,34.3440036966913],[-117.474862003096,34.3434764831504],[-117.470264885395,34.3473216925195],[-117.467523746857,34.351661828971],[-117.464679122903,34.3591621112511],[-117.461595340616,34.359847395625],[-117.460338986452,34.3645301737428],[-117.456920867707,34.3672235018636],[-117.449540309385,34.3686626331113],[-117.450829448966,34.3624645789543],[-117.439070648985,34.3631776810365],[-117.433846966701,34.3680488737373],[-117.432304411495,34.3657114383242],[-117.435435741699,34.3619535018718],[-117.430364636498,34.3610854747898],[-117.429725035458,34.3571108227126],[-117.432466176078,34.3542326279254],[-117.42899406775,34.3509432623055],[-117.430746804206,34.3445234446071],[-117.423460317759,34.3353308706631],[-117.418004315684,34.3431395498176],[-117.409438257364,34.3427112466933],[-117.404631747997,34.3379047342007],[-117.415756204229,34.3269630227594],[-117.416422453187,34.3232510644318],[-117.424179494841,34.3239173144308],[-117.42903359275,34.3188728581886],[-117.436314743781,34.3157795581934],[-117.438313490653,34.3226324060994],[-117.444457680226,34.3216258238093],[-117.44514783335,34.3161650925678],[-117.448036017721,34.311740254033],[-117.453386893754,34.3108257727844],[-117.460087542702,34.3010871957162],[-117.453073457296,34.2926208696877],[-117.45375166667,34.2797333009577],[-117.451013242716,34.2729190905516],[-117.454159965628,34.2688685603496],[-117.458043247914,34.2667761843111],[-117.459194967703,34.2588415103651],[-117.46174202395,34.251637752043],[-117.452742377088,34.2454239530943],[-117.45169541459,34.2429493135148],[-117.457901051039,34.2391802478957],[-117.466056884359,34.2418195176832],[-117.470746744769,34.2450562905948],[-117.477360042675,34.2466028437175],[-117.48161078121,34.2455629072608],[-117.488007408284,34.2486283082977],[-117.487972986409,34.2583966666158],[-117.493280691609,34.2611440801532],[-117.495450431189,34.2602926957795],[-117.504174900967,34.2645906655645],[-117.514916559284,34.266652591603],[-117.51408226866,34.2754615499227],[-117.522317607189,34.2833453894938],[-117.526552848849,34.2891600582348],[-117.530198444677,34.2917064759391],[-117.53858403633,34.2924694123963],[-117.541401316534,34.295610300933],[-117.549087691522,34.2983951092621],[-117.551278791519,34.3012011165494],[-117.559262951923,34.3052488352931],[-117.561604795669,34.304276124878],[-117.560623337338,34.2994490571771],[-117.563654137333,34.2953153457252],[-117.567567673785,34.2948587936426],[-117.577040915437,34.3007832478],[-117.5795855696,34.3049291488352],[-117.587632651879,34.3116749894498],[-117.594633417493,34.3135381456969],[-117.596712463323,34.3166056050671],[-117.58708653938,34.3165332071506],[-117.573801475859,34.3188939227719],[-117.572169766486,34.327639570675],[-117.567292472744,34.3337109977489],[-117.571073641488,34.3392651956569],[-117.575423038356,34.3386480487829],[-117.589770184167,34.3430636091927],[-117.59757481853,34.3422545914856],[-117.599002493528,34.3472276654363],[-117.607382769557,34.3540138123007],[-117.606868002891,34.3590996487512],[-117.604045666437,34.3620477195799],[-117.603081102897,34.3704528549836],[-117.599023243528,34.3702281716506],[-117.594265724785,34.3766305320573],[-117.588223536253,34.374472493519],[-117.584092038343,34.379636521636],[-117.581102591473,34.377474569556],[-117.573375699818,34.3773040528896],[-117.570039694615,34.3725784424802],[-117.559303566506,34.3654400601997],[-117.550623293603,34.3646120081176],[-117.550080776937,34.3620707424965],[-117.545233724862,34.358566848752],[-117.538103833206,34.3639164070771],[-117.539093688413,34.3705788976917],[-117.543890682155,34.370807326858],[-117.545946535277,34.3754520341425],[-117.539548155079,34.3737792153951],[-117.529636722802,34.3695633581099],[-117.527753298847,34.3720768789394],[-117.534549918628,34.3751972237262],[-117.538075823831,34.3753010758094],[-117.545654848819,34.3791448914284],[-117.547833007149,34.3821774018404],[-117.545407677986,34.3854094320437],[-117.538081715498,34.3874700257905],[-117.535005608211,34.3902871466194],[-117.530183142593,34.3900695320364],[-117.526193772808,34.3823873528817],[-117.522033505106,34.3836218299631],[-117.516013469699,34.3911091997431],[-117.517845655112,34.3938931674472],[-117.516417978031,34.3970816445255],[-117.512111155121,34.397628921608],[-117.509232006167,34.3941787028634],[-117.506448038463,34.3967009309845],[-117.504782415549,34.4031016809745],[-117.506923928046,34.404910070555],[-117.505591431173,34.4089075642989]]]},"properties":{"stroke-width": 2,"fill-opacity": 0.5,"fill": '#ff4e00', "stroke":'#ff4e00'}}]}),pin-s+ff0000(-117.60778,34.32577)/auto/600x400?access_token=pk.eyJ1IjoicmVkem9uZXNvZnR3YXJlIiwiYSI6IkNKNXhPNkUifQ.yPI1bZL3nEvDFbdQjeTB-A&before_layer=road-label-small
Can anyone get the geojson overlay to work with custom color?
Best Answer
As you'll note in the API documentation, the GeoJSON you put in this URL needs to be URL-encoded. You can use a tool like this one to do the encoding, or a method like encodeURIComponent if you're producing this URL programmatically.