BaseLayerPicker

BaseLayerPicker with its drop-panel open.

The BaseLayerPicker is a single button widget that displays a panel of available imagery providers. When an item is selected, the corresponding imagery layer is created and inserted as the base layer of the imagery collection; removing the existing base. Each item in the available providers list contains a name, a representative icon, and a tooltip to display more information when hovered. The list is initially empty, and must be configured before use, as illustrated in the below example.

Parameters:

Throws:

• DeveloperError : container is required.
• DeveloperError : Element with id "container" does not exist in the document.
• DeveloperError : imageryLayers is required.

Example

// In HTML head, include a link to the BaseLayerPicker.css stylesheet,
// and in the body, include: <div id="baseLayerPickerContainer"></div>

//Create the list of available providers we would like the user to select from.
//This example uses 3, OpenStreetMap, The Black Marble, and a single, non-streaming world image.
var providerViewModels = [];
providerViewModels.push(ImageryProviderViewModel.fromConstants({
     name : 'Open\u00adStreet\u00adMap',
     iconUrl : require.toUrl('../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 new OpenStreetMapImageryProvider({
             url : 'http://tile.openstreetmap.org/',
         });
     }
 }));

 providerViewModels.push(ImageryProviderViewModel.fromConstants({
     name : 'Black Marble',
     iconUrl : require.toUrl('../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 new TileMapServiceImageryProvider({
             url : 'http://cesium.agi.com/blackmarble',
             maximumLevel : 8,
             credit : 'Black Marble imagery courtesy NASA Earth Observatory',
         });
     }
 }));

 providerViewModels.push(ImageryProviderViewModel.fromConstants({
     name : 'Disable Streaming Imagery',
     iconUrl : require.toUrl('../Images/ImageryProviders/singleTile.png'),
     tooltip : 'Uses a single image for the entire world.',
     creationFunction : function() {
         return new SingleTileImageryProvider({
             url : 'NE2_LR_LC_SR_W_DR_2048.jpg',
         });
     }
 }));

//Finally, create the actual widget using our view models.
var layers = centralBody.getImageryLayers();
var baseLayerPicker = new BaseLayerPicker('baseLayerPickerContainer', layers, providerViewModels);

//Use the first item in the list as the current selection.
baseLayerPicker.viewModel.selectedItem(providerViewModels[0]);

See:

• ImageryProvider
• ImageryProviderViewModel
• ImageryLayerCollection