Mapbox addLayer not working for satellite-streets style

[sumitparkash]

Mapbox cannot retain the custom layer after you change the map style using SetStyle as discuss in previous issues:
#2267
#3979

A solution to change the map style while keeping the previous custom layer is to use the map addLayer.

Add different layer with addLayer , then show the layer accordingly by setting the layer
visibility to visible or hidden using setLayoutProperty as described below:

map.addSource("mapbox-satellite", { "type": "raster", "url": "mapbox://mapbox.satellite", "tileSize": 256 }); map.addLayer({ "type": "raster", "id": 'satellite-map', "source": "mapbox-satellite" });

Mapbox provided different styles for the map
streets
light
dark
satellite
basic
satellite-streets

Now I am trying to add those layer using map.addLayer. However, for some layer, it's not working.
it's not working for basic and satellite-streets
I have created a jsfiddle
https://jsfiddle.net/devsumitparkash/zetwapkn/

If you check the jsfiddle you will see that the addlayer not working for basic , bright, satellite-streets

I checked in the console and giving the error for these layers

GET https://api.mapbox.com/v4/mapbox.satellite-streets.json?secure&access_token=pk.eyJ1IjoiZGV2cGFya2FzaHN1bWl0IiwiYSI6ImNqc242dmNvcTAwdno0YXFuMzQ4MGlzbWkifQ.nhpUN4VR3Lvd7_gjtsIesg 404 (Not Found)

It would be great if anyone can suggest a way to have it working for the basic , bright, satellite-streets also.

[ansis]

@sumitparkash thanks for using mapbox-gl-js! I think the Mapbox supporting team could better answer this question about how the APIs work. I'm not sure which styles are supported with that API. https://www.mapbox.com/contact/

You may be able to work around your issue with https://docs.mapbox.com/api/maps/#retrieve-raster-tiles-from-styles

"raster-tiles": {
        "type": "raster",
        "tiles": ["https://api.mapbox.com/styles/v1/mapbox/bright-v9/tiles/{z}/{x}/{y}?access_token=YOURTOKEN"],
        "tileSize": 256
        }
    }

[sumitparkash]

Thanks for the reply.
I have contacted the mabbox support. Waiting for their reply.

Also, I try the solution you provide but still got the error.
I try the following code

map.addLayer({ id: "raster-satellite-streets", source: {"type": "raster", "url": "https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/1/1/0?access_token=YOURTOKEN"}, type: "raster", layout: { "visibility": "none" } });

This is the error I got
Error: Unexpected token � in JSON at position 0
at ajax.js:112

Also, i follow the link you mention
https://docs.mapbox.com/api/maps/#retrieve-raster-tiles-from-styles
But didn't find how I can use those in addLayer method.

Can you please suggest how to use raster tiles with addLayer

Thanks

[sumitparkash]

Also going through the network panel request in chrome devtool inspect panel found that for the streets view it sends the following request

https://api.mapbox.com/styles/v1/mapbox/streets-v9?access_token=YOURTOKEN

In the URL replace the streets with the satellite-streets
https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v9?access_token=YOURTOKEN
and got the response which could draw the satellite-streets view .

But not able to find any documentation about how this url can be used with mapbox.addLayer.

[ansis]

You can use it by specifying tiles when adding the source instead of url:

map.addSource("raster-tiles", {
        "type": "raster",
        "tiles": ["https://api.mapbox.com/styles/v1/mapbox/bright-v9/tiles/{z}/{x}/{y}?access_token=YOURTOKEN"],
        "tileSize": 256
        }
    })

Replace YOURTOKEN with your token as well.

[sumitparkash]

I try the code you mention it did work.
map.addLayer({ id: "raster-satellite-streets", source: {"type": "raster", "tiles": ["https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v9/tiles/1/1/0?access_token=" + mapboxgl.accessToken], "tileSize": 256 }, type: "raster", layout: {"visibility": "visible"} });

But the layout is a bit strange.

Can you mention the change in the above code, probably i think for the value
{z}/{x}/{y}
to produce the exact layout as in case of
mapbox://styles/mapbox/satellite-streets-v11 as mentioned in https://docs.mapbox.com/api/maps/#mapbox-styles.

I did try to read the documenation but ot able to get what should be the value of the
{z}/{x}/{y}
to have the layout same as you have when you use setStyle with value set to
mapbox://styles/mapbox/satellite-streets-v11.

Thanks

[ansis]

I think that api (https://docs.mapbox.com/api/maps/#retrieve-raster-tiles-from-styles) defaults to 512px tiles so you can remove "tileSize": 256 or change it to "tileSize": 512.

[sumitparkash]

I had try to set the tileSize to both 512 or 256.
But the layout is not as same as it would have been for the satellite-streets using the setsttyle.

Below links to jsfiddle to check the difference
when passing the style: 'mapbox://styles/mapbox/satellite-streets-v10',
https://jsfiddle.net/devsumitparkash/14ubng9y/
when using the raster tiles method
https://jsfiddle.net/devsumitparkash/y3u8ojqr/

Below the link you referr, there is a section https://docs.mapbox.com/api/maps/#styles
There it mention you can retrieve a style https://docs.mapbox.com/api/maps/#retrieve-a-style
Using that if i use this link
https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v10?access_token=YOURTOKEN
i think it returns the satellite streets layout.

But i am not sure how this link can be passed with map.addLayer.
Can you suggest how i can pass
https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v10?access_token=YOURTOKEN
to map.addLayer to retrieve the satellite-streets.

[sumitparkash]

Also @ansis , it has been a week I contacted the mapbox support
https://www.mapbox.com/contact/
But hasn't got any response from them. Any other way I can contact them regarding the issue.

Thanks

[ansis]

You should leave {z}/{x}/{y} unchanged. The renderer will then fill this in with the correct values when it loads the map. See https://jsfiddle.net/Lhxbd6ro/

[sumitparkash]

that works fine.
@ansis Thanks for your suggestion