Re-color multiple layers during MapBox Static Image API call?

Question

I'm using Mapbox's static image API to generate an image of routes I've run in the past few days. Due to URL character limits, I'm going the tileset route: each run is uploaded as a Tileset Source, I have a recipe that blends them all, and then I publish a single Tileset with many layers.

I'd like to be able to call the static image API and tell it (eg) make layer_01 "red" and [layer_02, layer_03] "grey". Customizing the color is possible with addLayer, but I can't figure out how to call multiple layers from the same tileset. Is this possible?

If not, do I need to add all layers to a custom Style, and republish it with new colors before every call? That seems incredibly cumbersome to have to constantly rebuild styles.

Answer 1

It's a bit difficult to give specific advice without seeing your style or the structure of your tilesets.

However, based on your description of your setup, I believe you can accomplish your goal of "re-coloring routes" by generating the route style layer on the fly using the Static Image API's addlayer query string parameter. addlayer is powerful primarily because it allows you style map data at the time of request with full use of style expressions. (Note: this recommendation assumes your route lines have some distinguishing characteristic.)

As a quick proof of concept, here is a static image request that takes the mapbox/streets-v11 style and adds a new style layer. The layer uses the match expression to color roads based on their "class":

https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/-122,36.99,11/300x300?before_layer=road-number-shield&addlayer={%22id%22:%22road-overlay%22,%22type%22:%22line%22,%22source%22:%22composite%22,%22source-layer%22:%22road%22,%22paint%22:{%22line-color%22:%20[%22match%22,%20[%22get%22,%20%22class%22],%20%22motorway%22,%20%22%23ff0000%22,%20%22primary%22,%20%22%23FFFF00%22,%20%22secondary%22,%20%22%23FF00FF%22,%20%22street%22,%20%22%2300FFFF%22,%20%22%23FFFFFF%22],%22line-width%22:2}}&access_token=your.tk

Which produces the following result: