Adding MapBox imagery to Cesium BaseLayerPicker - cesiumjs

Question

I'm able to add a custom base layer picker to may cesium viewer and can add imagery view models, but can't figure out how to add Map Box as one of those layers. Here is my code so far:
// Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer', {
timeline: false,
animation: false,
geocoder: false,
baseLayerPicker: false,
imageryProvider: false
});
// Array of view models (map layers)
var imageryViewModels = [];
// MapBox layer (not working)
imageryViewModels.push(new Cesium.ProviderViewModel({
name : 'Map Box layer',
iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/mapBox.png'),
tooltip : 'A custom layer',
creationFunction : function() {
return Cesium.createTileMapServiceImageryProvider({
url : url,
credit : 'MapBox'
});
}
}));
// Working layer from Cesium docs.
imageryViewModels.push(new Cesium.ProviderViewModel({
name : 'Natural Earth\u00a0II',
iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/naturalEarthII.png'),
tooltip : 'Natural Earth II, darkened for contrast.\nhttp://www.naturalearthdata.com/',
creationFunction : function() {
return Cesium.createTileMapServiceImageryProvider({
url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
});
}
}));
var blp2 = new Cesium.BaseLayerPicker('baseLayerPickerContainer', {
globe:viewer.scene,
imageryProviderViewModels : imageryViewModels
});
When I add the MapBox layer without the Base Layer Picker, it works great, eg:
var viewer = new Cesium.Viewer('cesiumContainer', {
timeline: false,
animation: false,
geocoder: false,
baseLayerPicker: false,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: url
})
});
And for completion, my url is generated like this:
var MAPBOX_ACCESS_TOKEN = 'access-token';
var MAPBOX_STYLE_ID = 'style-id';
var MAPBOX_USERNAME = 'username';
var url = 'https://api.mapbox.com/styles/v1/' + MAPBOX_USERNAME + '/' + MAPBOX_STYLE_ID + '/tiles/256/{z}/{x}/{y}?access_token=' + MAPBOX_ACCESS_TOKEN;
When I try adding the MapBox layer with a ProviderViewModel, I get a 404 and the following Cesium error:
An error occurred in "b": Failed to obtain image tile X: 0 Y: 1 Level: 1.
I'm obviously constructing the ProviderViewModel incorrectly for a custom map layer, but I can't figure out what I need to change.

Answer 1

So I had to do some trial and error to get the MapBox URL right, but here is my solution for anyone else looking:
var MAPBOX_ACCESS_TOKEN = 'your_access_token';
var MAPBOX_STYLE_ID = 'style_id_from_your_account';
var MAPBOX_USERNAME = 'your_mapbox_username';
var defaultMap = 'https://api.mapbox.com/styles/v1/' + MAPBOX_USERNAME + '/' + MAPBOX_STYLE_ID + '/tiles/256/{z}/{x}/{y}?access_token=' + MAPBOX_ACCESS_TOKEN;
Then:
You can create an array to store all the different map themes a user can choose from.
var providerViewModels = [];
providerViewModels.push(new Cesium.ProviderViewModel({
name: 'Name of your map theme (can be anything)',
iconUrl: Cesium.buildModuleUrl("path_to_an_icon_image"),
tooltip: 'some tooltip text (optional)',
creationFunction: function() {
return new Cesium.UrlTemplateImageryProvider({
url: defaultMap
});
}
}));
Finally, you add the layers to your map:
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProviderViewModels: providerViewModels
});