Drawing polygons using Mapbox static api

Question

I keep getting message: "Invalid GeoJSON" errors when trying to add a polygon to a static map on mapbox api.

On the following map:

https://api.mapbox.com/v4/mapbox.streets/geojson(%7B%22type%22%3A%22Feature%22%2C%22properties%22%3A%7B%7D%2C%22geometry%22%3A%7B%22type%22%3A%22LineString%22%2C%22coordinates%22%3A%5B%5B-120.8492%2C39.4916%5D%2C%5B-120.8474%2C39.4896%5D%2C%5B-120.8510%2C39.4864%5D%2C%5B-120.8492%2C39.4916%5D%5D%7D%7D),pin-s-1+f44(-120.849200,39.491600,13),pin-s-2+f44(-120.847400,39.489600,13),pin-s-3+f44(-120.851000,39.486400,13),geojson(%7B%22type%22%3A%22Feature%22%2C%22properties%22%3A%7B%22stroke-width%22%3A4%2C%22stroke%22%3A%22%23ff4444%22%2C%22stroke-opacity%22%3A0.5%7D%2C%22geometry%22%3A%7B%22type%22%3A%22LineString%22%2C%22coordinates%22%3A%5B%5B39.4916%2C%20-120.8492%5D%2C%5B39.4896%2C%20-120.8474%5D%2C%5B39.4864%2C%20-120.8510%5D%2C%5B39.4888%2C%20-120.8496%5D%5D%7D%7D)/-120.849600,39.488800,15/800x400.png?access_token=token

My LineString example works to outline the border of the polygon I wish to draw:

geojson({"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[[-120.8492,39.4916],[-120.8474,39.4896],[-120.8510,39.4864],[-120.8492,39.4916]]}})

If try to turn it into a polygon using the following geojson object:

geojson({"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[-120.8492,39.4916],[-120.8474,39.4896],[-120.8510,39.4864],[-120.8492,39.4916]]}})

It blows up:

https://api.mapbox.com/v4/mapbox.streets/geojson(%7B%22type%22%3A%22Feature%22%2C%22properties%22%3A%7B%7D%2C%22geometry%22%3A%7B%22type%22%3A%22Polygon%22%2C%22coordinates%22%3A%5B%5B-120.8492%2C39.4916%5D%2C%5B-120.8474%2C39.4896%5D%2C%5B-120.8510%2C39.4864%5D%2C%5B-120.8492%2C39.4916%5D%5D%7D%7D),pin-s-1+f44(-120.849200,39.491600,13),pin-s-2+f44(-120.847400,39.489600,13),pin-s-3+f44(-120.851000,39.486400,13),geojson(%7B%22type%22%3A%22Feature%22%2C%22properties%22%3A%7B%22stroke-width%22%3A4%2C%22stroke%22%3A%22%23ff4444%22%2C%22stroke-opacity%22%3A0.5%7D%2C%22geometry%22%3A%7B%22type%22%3A%22LineString%22%2C%22coordinates%22%3A%5B%5B39.4916%2C%20-120.8492%5D%2C%5B39.4896%2C%20-120.8474%5D%2C%5B39.4864%2C%20-120.8510%5D%2C%5B39.4888%2C%20-120.8496%5D%5D%7D%7D)/-120.849600,39.488800,15/800x400.png?access_token=token

Can anybody see what I am doing wrong? I'm having problems finding any examples of using the static api to draw polygons but the static api doc says that this is possible.

Thanks.

Hugo Lehoux Hugo Lehoux · Accepted Answer · 2016-04-13T02:16:11

Your geojson string is not valid. You've missed two square brackets around the coordinates. Here's a valid formula.

geojson({
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "Polygon",
                "coordinates": [[[-120.8492, 39.4916], [-120.8474, 39.4896], [-120.8510, 39.4864], [-120.8492, 39.4916]]]
            }
    })

If you want to generate a static map with your polygon, the corresponding API call would something like

https://api.mapbox.com/v4/mapbox.satellite/geojson(%7B%0A%20%20%20%20%22type%22%3A%20%22Feature%22%2C%0A%20%20%20%20%22properties%22%3A%20%7B%7D%2C%0A%20%20%20%20%22geometry%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%3A%20%22Polygon%22%2C%0A%20%20%20%20%20%20%20%20%22coordinates%22%3A%20%5B%5B%5B-120.8492%2C%2039.4916%5D%2C%20%5B-120.8474%2C%2039.4896%5D%2C%20%5B-120.8510%2C%2039.4864%5D%2C%20%5B-120.8492%2C%2039.4916%5D%5D%5D%0A%20%20%20%20%7D%0A%7D)/-120.8492,39.4890,15/[email protected]?access_token={{your_access_token}}

You can try it on this website http://staticmapmaker.com/mapbox/

Drawing polygons using Mapbox static api

2 Answers