Mapbox GL JS: Display map labels above layer?

Question

I'm using Mapbox GL JS, with a Mapbox Streets base layer. I have added a polygon layer with white borders and a transparent fill, but I'm finding it hard to read the basemap labels underneath the polygon layer. See how the labels are covered by the white borders:

Is there any way I can make sure the labels are on top of the polygon layer, or at least not obscured by it?

My code looks like this:

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-2.839, 54.579],
    zoom: 4
});
map.on('load', function () {
    map.addSource('constituencies', {
        'type': 'vector',
        'url': 'mapbox://pcsu.xxx'
    });
    var constituencyLayer = map.addLayer({
        'id': 'constituencies',
        'source': 'constituencies',
        'source-layer': 'constituencies',
        'type': 'fill',
        'paint': {
            'fill-color': 'rgba(162,181,205,0.6)',
            'fill-outline-color': 'white'
        },
        'layout': {
            'visibility': 'visible'
        }
    });

sgelb sgelb · Accepted Answer · 2017-03-12T23:25:45

Have a look at this Mapbox example and use the second argument of map.addLayer(layer, [before]). If this layer before exists, the new layer will be placed before/below it. I think the argument naming is a bit confusing here.

The name of the lowest label layer depends on the style. Most of the time you're looking for housenum-label. There's also a discussion in the Mapbox github issues how to ease this process, e.g by introducing placeholder layers.

Mapbox GL JS: Display map labels above layer?

1 Answers