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

F.H. picture F.H. · Dec 3, 2015 · Viewed 10.6k times · Source

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

Mask Ota picture Mask Ota · Sep 7, 2017

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 tabenter image description here

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