Mapbox GL JS: Add layer below US state labels?

Question

I am using Mapbox GL JS and I would like to add a choropleth layer, but show US state labels above the layer.

I have read this blog post about how to add layers underneath map labels. However, the example given explains how to add layers underneath city labels:

map.addLayer({
   ...
}, 'place_label_city_small_s'); // Place choropleth layer under these labels.

But how do I adapt this for US state labels? What should I use instead of place_label_city_small_s?

Is there a way that I can ensure all map labels appear on top of the layers?

Try place_label_other, what map style are you using light or street?? — Aravind
I'm using the light map style, thanks. place_label_other still seems to hide the state labels (and city labels too). — Richard
If you go into mapbox studio and start editing the basemap style you are using, you can then find the first feature that is a label, and use that name in your code. It is different for all basemap styles. — malcolm

Karussell Karussell · Accepted Answer · 2018-06-02T23:40:54

It is explained here, you identify the label layer via:

var layers = map.getStyle().layers;
// Find the index of the first symbol layer in the map style
var firstSymbolId;
for (var i = 0; i < layers.length; i++) {
    if (layers[i].type === 'symbol') {
        firstSymbolId = layers[i].id;
        break;
    }
}

Mapbox GL JS: Add layer below US state labels?

1 Answers