Using mapbox js, how do I change the style of a map?

Question

I have included my js and css for mapbox in the header:

<script src='//api.mapbox.com/mapbox.js/v2.2.4/mapbox.js'></script>
<link href='//api.mapbox.com/mapbox.js/v2.2.4/mapbox.css' rel='stylesheet' />

Added the map html:

<div id='map'></div>
<style>
    body { margin:0; padding:0; }
    #map { width:100%; height:471px; }
</style>

And then in js made a map:

L.mapbox.accessToken = 'pk.eyJ1Ijoic21pY2tpZSIsImEiOiJjaWtiM2JkdW0wMDJudnRseTY0NWdrbjFnIn0.WxGYL18BJjWUiNIu-r3MSA';
var map = L.mapbox.map('map', 'mapbox.streets').setView([40, -74.50], 3);

I don't know how to change the style of it to one I have in mapbox studio.

I have two style urls in mapbox studio:

mapbox://styles/smickie/cikb3fhvi0063cekqns0pk1f1

https://api.mapbox.com/styles/v1/smickie/cikb3fhvi0063cekqns0pk1f1.html?title=true&access_token=pk.eyJ1Ijoic21pY2tpZSIsImEiOiJjaWtiM2JkdW0wMDJudnRseTY0NWdrbjFnIn0.WxGYL18BJjWUiNIu-r3MSA#1.4858291953347187/42.16057367191365/1.6334765316350683/0

How do I apply these styles to the map in my page?

This is the api but I can't find how to change styles anywhere: https://www.mapbox.com/mapbox.js/api/v2.2.4/

Mapbox just released v2.3.0 of Mapbox.js API, check my updated answer. — iH8

iH8 iH8 · Accepted Answer · 2016-02-06T13:42:21

EDIT: Updated this answer because of the introduction of v2.3.0 of the Mapbox.js API. It add a L.mapbox.styleLayer which can handle styles created using Mapbox studio:

L.mapbox.styleLayer('mapbox://styles/mapbox/emerald-v8').addTo(map);

Example: https://www.mapbox.com/mapbox.js/example/v1.0.0/stylelayer/

Answer before Mapbox 2.3.0:

You're using the wrong API, those styles are for use with the Mapbox-GL api:

https://www.mapbox.com/mapbox-gl-js/examples/

If you want to use classic Mapbox API like you're doing now you need to use Mapbox Studio Classic to create your own styled tileset:

https://www.mapbox.com/studio/classic/

Using mapbox js, how do I change the style of a map?

1 Answers