mapbox studio layer highlightening city formula

I would like to embed a static map on a HTML file, with an highlightening area.

I am making it for a professional email using custom HTML for specific layout, so it doesn't support other langage than HTML. I only can use inline styling, and I need to add this map as a static image under the <img> tag. I already found a way to embed a static map with this code :

<!-- Retrieve a map at -87.0186 longitude, 32.4055 latitude, -->
<!-- zoom 14, bearing 0. Pitch will default to 0. -->
<!-- The map will be 500 pixels wide and 300 pixels high. -->
<img src="https://api.mapbox.com/styles/v1/mapbox/light-v10/static/-87.0186,32.4055,14/500x300?access_token=YOUR_TOKEN" alt="Map of the Edmund Pettus Bridge in Selma, Alabama.">

It gives me the ability to define the position and styling attribute as specified in the comment section, however I want a specific area to be highlighted.

So, I go to mapbox studio in order to config the map and extract the code in HTML. However I don't find how to set this, I know I have to use layer and set parameters to this layer. I'm pretty sure I have to use a formula in order to accomplish this.

My main goal is to highlight the contour of a city including all the city near to it within a 30km radius.

First of all, Mapbox Streets v8 tileset have some admin boundary but it does not have the state, prefecture or city id. That means it's just used to draw lines. Therefore, if you want to select cities close to the center coordinate, you need additional tiles. Mapbox provides Boundaries Service for that purpose. Or you can find some free data like this.

Once you prepare the boundary data, you can style the map dynamically with style parameters in Static Image API.

If I understand your use case correctly, your service (or your local tool) will generate emails that includes tag whose URL is Static API. The URL part will be dynamically changed according to your request.

Here's an example. I created a tileset that has country boundary data downloaded from here (I used Admin 0 - Countries). The tileset ID is yochi.092qgyqv.

Then create following style that colors the U.S.A. territory.

layer = {
    "id":"usa",
    "type":"fill",
    "source": {
        "type": "vector",
        "url": "mapbox://yochi.092qgyqv"
    },
    "source-layer":"ne_10m_admin_0_countries-6nyx14",
    "filter":["==",["get","ISO_A2"], "US"],
    "paint": {
        "fill-color":"#008800",
        "fill-opacity": 0.3
    }
}

Then generate URL.

https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/-93.0747,39.7962,2.5/700x400?access_token=pk.eyJ1IjoieW9jaGkiLCJhIjoiY2tjZThvdWExMDV2dDJxcDgxZzBwbzlxYSJ9.M0yRA6SXDMRgXzXGuYnvsg&addlayer=%7B%22id%22%3A%20%22usa%22%2C%20%22type%22%3A%20%22fill%22%2C%20%22source%22%3A%20%7B%22type%22%3A%20%22vector%22%2C%20%22url%22%3A%20%22mapbox%3A//yochi.092qgyqv%22%7D%2C%20%22source-layer%22%3A%20%22ne_10m_admin_0_countries-6nyx14%22%2C%20%22filter%22%3A%20%5B%22%3D%3D%22%2C%20%5B%22get%22%2C%20%22ISO_A2%22%5D%2C%20%22US%22%5D%2C%20%22paint%22%3A%20%7B%22fill-color%22%3A%20%22%23008800%22%2C%20%22fill-opacity%22%3A%200.3%7D%7D

And the outcome is this.

Please not that the style expression should be url encoded. I also attach a python script that generates the url.

import json
import urllib.parse

ACCESS_TOKEN = 'YOUR ACCESS TOKEN HERE'


def generate(layer):
    style = 'mapbox/streets-v11'
    encoded = urllib.parse.quote(json.dumps(layer))
    return f'curl -g "https://api.mapbox.com/styles/v1/{style}/static/-93.0747,39.7962,2.5/700x400?access_token={ACCESS_TOKEN}&addlayer={encoded}"'


if __name__ == '__main__':
    layer = {
        "id":"usa",
        "type":"fill",
        "source": {
            "type": "vector",
            "url": "mapbox://yochi.092qgyqv"
        },
        "source-layer":"ne_10m_admin_0_countries-6nyx14",
        "filter":["==",["get","ISO_A2"], "US"],
        "paint": {
            "fill-color":"#008800",
            "fill-opacity": 0.3
        }
    }

    output = generate(layer)
    print(output)

Added: In short, the image above can be obtained <img> tag. Could you try it in your HTML? What I explained was how to create this long URL.

 <img src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/-93.0747,39.7962,2.5/700x400?access_token=pk.eyJ1IjoieW9jaGkiLCJhIjoiY2tjZThvdWExMDV2dDJxcDgxZzBwbzlxYSJ9.M0yRA6SXDMRgXzXGuYnvsg&addlayer=%7B%22id%22%3A%20%22usa%22%2C%20%22type%22%3A%20%22fill%22%2C%20%22    source%22%3A%20%7B%22type%22%3A%20%22vector%22%2C%20%22url%22%3A%20%22mapbox%3A//yochi.092qgyqv%22%7D%2C%20%22source-layer%22%3A%20%22ne_10m_admin_0_countries-6nyx14%22%2C%20%22filter%22%3A%20%5B%22%3D%3D%22%2C%20%5B%22get%22%2C%20%22ISO_A2%22%5D%2C%20%22US%22%5D%2C%20%22paint%22%3A%20%7B%22fill-color%22%3A%20%22%23008800%22%2C%20%22fill-opacity%22%3A%200.3%7D%7D"></img>