Add custom map style to Mapbox.js

Question

I just created my personal map style with Mapbox Studio and i'm try to use it with Mapbox.js. (NOT Mapbox Gl js!!) As written in the docu

You can load and display styles from the API using Mapbox GL JS or the Mapbox Mobile SDKs or you can request styles directly from the API. This request requires an access token with the styles:read scope.

I added on my < head > a link to: https://api.mapbox.com/styles/v1/myusername/mystyleid?access_token=mypublicaccesstoken

I can see the JSON response but i still see basic map style.

How can i use my custom style in mapbox.js?

Answer 1

Sorry, but that won't work. Mapbox Styles are for use with Mapbox GL and the native iOS and Android SDK's. You can't use them with classic Mapbox JS. Mapbox JS supports raster tiles, you can't style those. They're just images. Mapbox GL and the native SDK's (can) use vector tiles and those are stylable. If you want to create a custom tileset for use with Mapbox JS you can do so using Mapbox Studio Classic.

• https://www.mapbox.com/studio/classic/styles/
• https://www.mapbox.com/mapbox-studio-classic/

Answer 2

You can use styles made with Mapbox Studio using the styleLayer method: https://docs.mapbox.com/mapbox.js/example/v1.0.0/stylelayer/. Though, I'd highly recommend moving over to Mapbox GL JS when possible to leverage all the functionality of WebGL and vector tiles.