Cannot find Mapbox Vector Tile URL for my Mapbox Style map

Question

Does anyone know how to get the URL for a Mapbox vector tile map (aka a "style")? I can only get a style address that looks like this: mapbox://styles/myusername/r3411y10ngh4sh3tc3tc, but I am using a plugin that requires a URL to integrate Mapbox's Vector Tiles with Leaflet: https://github.com/SpatialServer/Leaflet.MapboxVectorTile/blob/master/docs/configuration.md

I tried substituting the style address provided by Mapbox for the URL

var config = {
  url: "mapbox://styles/myusername/fwaoij32wlfij23slkfj3",
  ...etc
};

var mvtSource = new L.TileLayer.MVTSource(config);
map.addLayer(mvtSource);

but I get an error where it can't read the style address as a URL. Any suggestions? Should I be using a different plugin?

Update

In short, the URL for a Mapbox style is not yet available. Here is a response I received from Mapbox:

Leaflet is not yet compatible with styles made in Mapbox Studio since these styles require a GL-based renderer. We're currently working on a new API to allow you to use your Studio style with Leaflet, we expect it to launch in a few weeks.

At this time, you can use Mapbox GL JS to load your Mapbox Studio style. You can still access raster map IDs (maps made with Mapbox Editor, Mapbox Studio Classic) to load with Leaflet - these are found under the "Classic" tab in the Studio dashboard.

chrki chrki · Accepted Answer · 2015-12-21T15:37:25

The Leaflet.MapboxVectorTile plugin uses a different approach to styles than, for example, the Mapbox GL JS library does.

Styles you create in Mapbox Studio can be downloaded as JSON, but for Leaflet.MapboxVectorTile you have to create them programmatically as you can see in the documentation. You can still use their vector tile URL https://b.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=<public api token>, but styles would probably have to be rewritten/done from scratch again.

You can use the Mapbox Gl Javascript to create a map with the style you created, but I don't know how extensive your current project is and if it would conflict with other (Leaflet) plugins:

mapboxgl.accessToken = '<public API token>';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/<your name>/<style id>',
    center: [-74.50, 40],
    zoom: 9
});

Cannot find Mapbox Vector Tile URL for my Mapbox Style map

1 Answers