CODEWITHSUNDEEP
javascripthtmlleafletmapbox
F.H.
F.H.

Reputation: 1684

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

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

Upvotes: 20

Views: 19032

Answers (5)

Ralph Spandl
Ralph Spandl

Reputation: 151

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)

Upvotes: 0

Van Bernaert
Van Bernaert

Reputation: 698

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

Where to find Leaflet-link for Custom Mapbox style

Upvotes: 34

Rafael Braga
Rafael Braga

Reputation: 195

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/

Upvotes: 9

Mask Ota
Mask Ota

Reputation: 625

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

Upvotes: 25

iH8
iH8

Reputation: 28638

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/

Upvotes: -8

Related Questions