Mapbox GL - Prevent Layer Label Fading Based on Zoom

Question

Using Mapbox GL JS 1.12.0 with a GeoJSON source I'm adding circles that have a numeric label based on the "name" value in the GeoJSON.

map.addLayer({
    'id': 'marker',
    'type': 'circle',
    'source': 'geojson',
    'minzoom': 0,
    'maxzoom': 24,
    'paint': {
        'circle-radius': 10,
        'circle-color': '#FFFFFF',
        'circle-stroke-color': '#000000',
        'circle-stroke-width': 2,
        'circle-opacity': 1,
    },
    'filter': ['==', '$type', 'Point']
});

map.addLayer({
    'id': 'marker-label',
    'type': 'symbol',
    'source': 'geojson',
    'minzoom': 0,
    'maxzoom': 24,
    'layout': {
        'text-field': [ 'format', ['get', 'name'], { 'font-scale': 0.8, 'text-translate': [0,-20] } ],
    },
    'filter': ['==', '$type', 'Point']
});

When you're zoomed in they look correct:

As you zoom out the circles start to overlap, but still look correct:

But then the "2" fades out and the "1" shows through the circle for #2 (even though the circles have a white fill and an opacity of 1) and makes it unclear which is #1 and which is #2.

Is there a better way to do this? I wish you could just add a centered label to the circle itself.

Can I disable this automatic fading / transparency?

Can I somehow bind the label to that specific circle?

Answer 1

Can I disable this automatic fading / transparency?

You can use "text-allow-overlap": true to disable it. You may not like the result.

Can I somehow bind the label to that specific circle?

No.