CODEWITHSUNDEEP
cesiumjs
Arel
Arel

Reputation: 3938

Adding MapBox imagery to Cesium BaseLayerPicker

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.

Upvotes: 2

Views: 2524

Answers (1)

Arel
Arel

Reputation: 3938

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

Upvotes: 2

Related Questions