FEATURE: widgets, map types?

I couldn’t figure out from the docs how to add the map types and bing maps widgets for the different terrain types to the cesium tool bar. Could you clarify?

ex:

my current failing attempt:

ngOnInit() {
        const imageryViewModels = [];
        imageryViewModels.push(new Cesium.ProviderViewModel({
             name : 'Open\u00adStreet\u00adMap',
             iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/openStreetMap.png'),
             tooltip : 'OpenStreetMap (OSM) is a collaborative project to create a free editable \
        map of the world.\nhttp://www.openstreetmap.org',
             creationFunction : function() {
                 return Cesium.createOpenStreetMapImageryProvider({
                     url : 'https://a.tile.openstreetmap.org/'
                 });
             }
         }));

        imageryViewModels.push(new Cesium.ProviderViewModel({
             name : 'Black Marble',
             iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/blackMarble.png'),
             tooltip : 'The lights of cities and villages trace the outlines of civilization \
        in this global view of the Earth at night as seen by NASA/NOAA\'s Suomi NPP satellite.',
             creationFunction : function() {
                 return Cesium.createTileMapServiceImageryProvider({
                     url : 'https://cesiumjs.org/blackmarble',
                     credit : 'Black Marble imagery courtesy NASA Earth Observatory',
                     flipXY : true
                 });
             }
         }));

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

        const widget = new Cesium.CesiumWidget('cesiumContainer', { imageryProvider: false });
        const baseLayers = new Cesium.BaseLayerPicker('baseLayerPickerContainer', {
            globe: widget.scene.globe,
            imageryProviderViewModels: imageryViewModels
        });
    }

[eitanfr]

hi, you need to do 2 things:

1. init the cesium viewer with baseLayerPicker=false
2. create your own baseLayerPicker and add it to your cesium map viewer

// use ViewerConfigurationService to give initial options to the cesium map viewer . 
// check out demo-map.compoennt.ts for usage example 
export class DemoMapComponent {
	constructor(private viewerConf: ViewerConfiguration) {
		viewerConf.viewerOptions = {
			baseLayerPicker : false,
			// and any options you want accourding cesium viewer doc. 
		};
    }
}

//Finally, create the baseLayerPicker widget using view models like you did
const imageryViewModels = // create like you did

// add the wiget to your glboe 
const globe =  this.mapsManagerService.getMap().getCesiumViewer().scene.globe.
const baseLayerPicker = new Cesium.BaseLayerPicker('baseLayerPickerContainer', {
    globe : globe,
    imageryProviderViewModels : imageryViewModels
});

[eitanfr]

Great! closing