Class: BaseLayerPicker

BaseLayerPicker that opens a drop-down panel.

BaseLayerPicker is a single-button widget that displays a panel of available imagery and terrain providers. When an imagery is selected, the corresponding imagery layer is created and inserted as the base layer of the imagery collection; the existing base layer is removed. When a terrain is selected, it replaces the current terrain provider. Each item in the list of available providers contains a name, a representative icon, and a tooltip to display more information on hover. The list is initially empty and must be configured before use, as shown in the example below.

See:

• TerrainProvider
• ImageryProvider
• ImageryLayerCollection

Throws:

The element with ID 'container' does not exist in the document.

Type

DeveloperError

Example

// In HTML head, include a link to the BaseLayerPicker.css stylesheet,
// and in the body, include: 


//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 imageryViewModels = [];
imageryViewModels.push(new SuperMap3D.ProviderViewModel({
     name : 'Open\u00adStreet\u00adMap',
     iconUrl : SuperMap3D.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 SuperMap3D.createOpenStreetMapImageryProvider({
             url : 'https://a.tile.openstreetmap.org/'
         });
     }
 }));

 imageryViewModels.push(new SuperMap3D.ProviderViewModel({
     name : 'Black Marble',
     iconUrl : SuperMap3D.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 SuperMap3D.createTileMapServiceImageryProvider({
             url : 'https://cesiumjs.org/blackmarble',
             credit : 'Black Marble imagery courtesy NASA Earth Observatory',
             flipXY : true
         });
     }
 }));

 imageryViewModels.push(new SuperMap3D.ProviderViewModel({
     name : 'Natural Earth\u00a0II',
     iconUrl : SuperMap3D.buildModuleUrl('Widgets/Images/ImageryProviders/naturalEarthII.png'),
     tooltip : 'Natural Earth II, darkened for contrast.\nhttp://www.naturalearthdata.com/',
     creationFunction : function() {
         return SuperMap3D.createTileMapServiceImageryProvider({
             url : SuperMap3D.buildModuleUrl('Assets/Textures/NaturalEarthII')
         });
     }
 }));

//Create a Widget without imagery, if you haven't already done so.
var Widget = new SuperMap3D.Widget('Container', { imageryProvider: false });

//Finally, create the baseLayerPicker widget using our view models.
var layers = Widget.imageryLayers;
var baseLayerPicker = new SuperMap3D.BaseLayerPicker('baseLayerPickerContainer', {
    globe : Widget.scene.globe,
    imageryProviderViewModels : imageryViewModels
});