CODEWITHSUNDEEP
apimapbox
plasma147
plasma147

Reputation: 2211

Drawing polygons using Mapbox static api

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.

Upvotes: 2

Views: 2025

Answers (2)

Hugo Lehoux
Hugo Lehoux

Reputation: 86

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/

Upvotes: 7

plasma147
plasma147

Reputation: 2211

I couldn't work out how to do this using geojson but realised that I could do this with polylines and the fill property.

I calculated my polylines with help from the google maps for android polyutil class.

Upvotes: 1

Related Questions