Mapbox GL-JS : Adding new tileset overlay under labels

Question

I have a tileset that I am loading into my map (map is called topleftmap). I want the city and other labels to load over the tiles, not under - sort of like in this example from Mapbox : https://docs.mapbox.com/mapbox-gl-js/example/geojson-layer-in-stack/

How do I do this with tilesets? I have an external JS file I use to load in the tilesets like this :

topleftmapbox.addLayer({
    "id": "currentProduct",
    "type": "raster",
    "source": {
        "type": "raster",
        "tiles": ["tiles/" + productSelection + "/" + productLocation + "/{z}/{x}/{y}.png"],
        "minzoom": 8,
        "maxzoom": 10,
        "scheme": "tms",
        "tileSize": 256,

    }});

So of course that works fine, but the labels are UNDER the tiles. I have tried this below, (using the example from Mapbox) but it doesn't seem to work :

var layers = topleftmapbox.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;
        }
    }

topleftmapbox.addLayer({
    "id": "currentProduct",
    "type": "raster",
    "source": {
        "type": "raster",
        "tiles": ["tiles/" + productSelection + "/" + productLocation + "/{z}/{x}/{y}.png"],
        "minzoom": 8,
        "maxzoom": 10,
        "scheme": "tms",
        "tileSize": 256,

    },firstSymbolId});

Lastly, here is an image showing what it looks like. My tiles are slightly transparent, but the labels should be bright white, like the ones away from the data. Any thoughts?

Answer 1

You're doing everything right. You just have a slight syntax mistake:

},firstSymbolId});

This should be:

}}, firstSymbolId);