Can you draw a circle on a mapbox static map?

7
votes

I have some geojson shapes I'm passing to the Mapbox static maps API. Some of the shapes are polylines, others are circles represented as points with a radius property e.g:

    {
        "type": "Feature",
        "properties": {
            "radius": 500
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                30.5,
                50.5
            ]
        }
    }

These get rendered as points with a marker. Is there any way I can get a point to render as a circle of a certain radius centered around that point?

2
mapbox
Have you found a solution? – mcont
Did you find a solution? – Hardik Raval

2 Answers

1
votes

You can use layer type : circle to display the points as circles. You can then use expressions to get the radius from your geojson properties: Check the JS Fiddle

map.addLayer({
            'id': 'demo',
            'type': 'circle',
            'source': 'points',
            'paint': {
              // use get expression to get the radius property. Divided by 10 to be able to display it
                'circle-radius': ['/',['get', 'radius'],10],
                'circle-color': "blue"
            }
        });
0
votes

I think the proper way to do this would be for mapbox to support passing geojson to the addlayer querystring param of the static image. However, at this time, they seem to only allow you to use an existing mapbox source for static image layers.

My personal workaround was to create a circle image with a transparent background, upload it to the web, and reference as an overlay at the coordinates that I want to display it at. The format is url-{url}({lon},{lat}) and would be used like this:

const overlay = `url-${circleURL}(${lon},${lat})`
...
const url = `https://api.mapbox.com/styles/v1/mapbox/${style}/static/${overlay}/${lon},${lat},${zoom},${pitch}/${size}@2x?access_token=${token}`

It's not ideal, but it works for my use-case. Make sure the URL is urlencoded.