How can I use a custom created mapbox style along with leaflet

Question

I can't find any examples for how to use custom created map-styles.

On the mapbox page I created a style for a map.

How can I use this style with leaflet?

For example:

var map = L.map('map', {
    center: [43.64701, -79.39425],
    zoom: 15
});

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Where do I put mapbox://styles/ficht/cihqdfw3f004ybnm35e7zefon ?

This is the map:

https://api.mapbox.com/styles/v1/ficht/cihqdfw3f004ybnm35e7zefon.html?title=true&access_token=pk.eyJ1IjoiZmljaHQiLCJhIjoiY2locWQ3YTBtMDAxYnY1bHVvcGtsM2Y1MCJ9.C8NlGmZuX6W2YrvXTHULeQ#1.6044619216776894/37.74890243399017/28.62971087861783/0.08751522544480395

Answer 1

with current Mapbox version:

1. after you created your own style, click "Share..." at right top menu
2. You get popup, select Develop "Third Party" and in dropdown "CARTO"
3. copy "Integration URL". This is the link you need for Leaflet.js to set value for the 'tileLayer' object

Answer 2

I successfully added a mapbox style to leaflet

On this URL https://www.mapbox.com/studio/styles/ select your style. Ill use a default style for this example (i think this one is available to all) https://www.mapbox.com/studio/styles/mapbox/streets-v10/share/

Then on this page select the leaflet tab

Copy the Url and use like so in your js file

var map = L.map('map');

L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFza290YSIsImEiOiJjaXp0bmI3M3EwMDBvMndzMHJudnlsMDllIn0.jV7rTNmfiqjx57usCu54rQ', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
}).addTo(map);

Answer 3

It's really simple.

The URL to use your map as a tile map:

https://api.mapbox.com/styles/v1/YOUR_USERNAME/YOUR_STYLE_ID/tiles/256/{z}/{x}/{y}?access_token=YOUR_ACCESS_TOKEN

If you want to copy/import a style to your studio account:

https://www.mapbox.com/studio/styles/add-style/THE_USERNAME/THE_STYLE_ID/

Answer 4

This code worked for me:

let map = L.map('map',{
            center: [45.5017, -73.5673],
            zoom: 10
        })

L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}?access_token={YOUR_ACCESS_TOKEN}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18
        }).addTo(map)

Answer 5

That won't work in combination with Leaflet, you'll need to switch to Mapbox GL:

• https://www.mapbox.com/mapbox-gl-js/api/
• https://github.com/mapbox/mapbox-gl-js

Example:

mapboxgl.accessToken = YOUR_KEY;
var map = new mapboxgl.Map({
    container: 'map',
    style: YOUR_STYLE_URL
    center: [0, 0],
    zoom: 0
});

https://www.mapbox.com/mapbox-gl-js/example/custom-style-id/