Mapbox studio - png labels layer - transparency showing up as black

1
votes

I have created some custom styles in mapbox studio. They are essentially just the mapbox outdoors style and the mabpox satellite style, each customized, separated out into 2 styles each: the basemap with no labels at all, and only the labels without the basemap. I want to give the user the ability to toggle layers on and off, or set the transparency. You can see the layers here:

Outdoors labels only

Satellite labels only

Within mapbox studio, the tiles show transparency where there are no roads / labels / etc. This is what I would expect. I am then using these layers in leaflet like so:

var mapBoxOutdoorsLabels = L.tileLayer(
  'https://api.mapbox.com/styles/v1/slutske22/ck87tp2fq0rq41iqox69g4ko5/tiles/256/{z}/{x}/{y}@2x?access_token={accessToken}', 
  { accessToken ,maxZoom: 18, pane: 'labels'})
.addTo(map1)

var mapBoxSatelliteLabels = L.tileLayer(
'https://api.mapbox.com/styles/v1/slutske22/ck8i7fv4h0h771ipc6mwzwmp4/tiles/256/{z}/{x}/{y}@2x?access_token={accessToken}', 
  { accessToken ,maxZoom: 18, pane: 'labels'})
.addTo(map2)

As far as I can tell, the way I'm importing these two layers is identical. But for some reason, my labels layer for outdoors shows up properly (with transparent background), while my labels layer for satellite shows up with all black background, and you cannot see through to the basemap. The map on the right is the problem:

Issue

Here is a working codesandbox of the problem

I'm not sure what I'm doing wrong in mapbox studio or in my leaflet import for the tiles to be generated with black instead of transparent. The way I'm building the two maps are identical, at least as far as I can tell. Any ideas?

Thanks for reading.

1
leafletmapboxrastermapbox-studio

1 Answers

1
votes

The background layers in your labels mapbox style are not transparent.

Here is a codepen with a copy of your style with the background fixed

What I did:

Removing the /tiles/{x}/{y}/{z}/ part from your style's URL and running that in a browser returns the json from mapbox. There I saw that your background layer color is missing the alpha channel value.

"layers": [
        {
            "id": "background",
            "type": "background",
            "layout": {
                "visibility": "none"
            },
            "paint": {
                "background-color": "hsl(222, 56%, 4%)" <= SHOULD BE (222, 56%, 4%, 0)
            },
  • I was able to save the json file and upload it as my own style on https://studio.mapbox.com/
  • there I changed the alpha channel of the background and reduced the opacity of the satellite layer.
  • It appears that "visibility: none" doesn't work as intended
  • exported as a new style, I updated the fork with my style and access token