Use a custom created Mapbox style (from Mapbox Studio) along with Leaflet

Question

I can't find any examples for how to use custom created Mapbox 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

ssstofff · Answer 1 · 2019-09-27T09:58:34.750

32

with current Mapbox version:

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

edited Sep 27 '19 at 09:58

answered Sep 26 '19 at 21:43

ssstofff

638
1
10
19

Thanks! Only using this way can successfully print the map. – chenghuayang Aug 10 '21 at 11:35

score 25 · Accepted Answer · answered Sep 07 '17 at 12:14

25

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);

answered Sep 07 '17 at 12:14

Mask Ota

605
7
10

Thanks for this! Exactly what I needed, and what the OP needed also. I think this should be the accepted answer... – mr.adam May 23 '18 at 19:39
2

I think this has changed. I had to go to `use` and use the URL for `Fulcrum` – engineercoding Dec 06 '18 at 08:25
6

You can add a Mapbox Studio style to a Leaflet map using this endpoint with the L.TileLayer class: https://api.mapbox.com/styles/v1/YOUR_USERNAME/YOUR_STYLE_ID/tiles/256/{z}/{x}/{y}?access_token=YOUR_ACCESS_TOKEN – aillusions Dec 12 '18 at 12:11

Rafael Braga · Answer 3 · 2019-07-17T18:55:02.970

9

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/

edited Jul 17 '19 at 18:55

answered Jan 07 '19 at 18:36

Rafael Braga

177
2
4

can you expand on this answer, it seems really important! If you have hundreds of tiles, you can't click to create a studio style for each. Plus there is a 15 source limit per style. Do you add them to a 'new' style using the API and then use that link? – bw4sz Jun 25 '20 at 15:47

score 0 · Answer 4 · answered Oct 29 '19 at 14:25

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)

score -8 · Answer 5 · answered Dec 03 '15 at 17:34

-8

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

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/

answered Dec 03 '15 at 17:34

iH8

27,722
4
67
76

Actually they say you could use mapbox on their site http://leafletjs.com/examples/quick-start.html Anyway your example does what i need so thank you very much for the help! – F.H. Dec 03 '15 at 20:43
you are mistaken, mapbox style does work with leaflet. – Richard Zilahi Mar 03 '20 at 10:57
Well if so @RichardZilahi, then it would be nice if you include a 2015 reference link so people can see what you mean. – iH8 Mar 03 '20 at 11:04

Use a custom created Mapbox style (from Mapbox Studio) along with Leaflet

5 Answers5