# replacing BaseLayerPicker in CesiumViewerWidget?

**URL:** <https://community.cesium.com/t/replacing-baselayerpicker-in-cesiumviewerwidget/478>\
**Category:** CesiumJS\
**Created:** [May 23, 2013, 6:55am UTC](https://community.cesium.com/t/replacing-baselayerpicker-in-cesiumviewerwidget/478 "2013-05-23T06:55:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Akos\_Maroy](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@Akos\_Maroy](https://community.cesium.com/u/Akos_Maroy)\
**Post date:** [May 23, 2013, 6:55am UTC](https://community.cesium.com/t/replacing-baselayerpicker-in-cesiumviewerwidget/478/1 "2013-05-23T06:55:17Z")

</div>

Hi,

I wonder if it was ever intended, or possible to replace the  
BaseLayerPicker, or the list of possible layers in CesiumViewerWidget?

what I'd like to do is simply to have a different list of imagery  
providers. to achieve this, I tried the following:

- replace the baseLayerPicker object:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var widget = new CesiumViewerWidget({});

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// place & start  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget.placeAt(options.divName);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget.startup();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// override the base layer imagery providers  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget.baseLayerPicker.destroy();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var imageryLayers = widget.centralBody.getImageryLayers();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var providerViewModels =  
myCreateImageryProviders(widget.dayImageUrl);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget.baseLayerPicker = new  
Cesium.BaseLayerPicker(widget.baseLayerPickerContainer, imageryLayers,  
providerViewModels);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
widget.baseLayerPicker.viewModel.selectedItem(providerViewModels[0]);

now this almost works - but the old drop-down menu remains in place, and  
the new dropdown menu is put on top of it. this is despite the fact that  
it seems in BaseLayerPicker.prototype.destory() provisions are taken to  
clean the container element:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var container = this.container;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;knockout.cleanNode(container);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;container.removeChild(this.\_element);

- replace baseLayerPicker.viewModel :

as above, bust instead of creating anew BaseLayerPicker:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget.baseLayerPicker.viewModel = new  
Cesium.BaseLayerPickerViewModel(imageryLayers, providerViewModels);

this doesn't work

- replace CesiumViewerWidget.createImageryProviders

CesiumViewerWidget.createImageryProviders = myCreateImageryProviders;

this doesn't seem to have an effect

thus, what is the proper way to do this, if at all?

Akos

---

<div class="post-metadata">

**Author:** ![Akos\_Maroy](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@Akos\_Maroy](https://community.cesium.com/u/Akos_Maroy)\
**Post date:** [May 23, 2013, 7:46am UTC](https://community.cesium.com/t/replacing-baselayerpicker-in-cesiumviewerwidget/478/2 "2013-05-23T07:46:52Z")

</div>

anyway, I added a ticket with a suggested solution:

[https://github.com/AnalyticalGraphicsInc/cesium/issues/788](https://github.com/AnalyticalGraphicsInc/cesium/issues/788)

---

<div class="post-metadata">

**Author:** ![Dan\_Moran](https://avatars.discourse-cdn.com/v4/letter/d/74df32/32.png) [@Dan\_Moran](https://community.cesium.com/u/Dan_Moran)\
**Post date:** [June 2, 2014, 1:03pm UTC](https://community.cesium.com/t/replacing-baselayerpicker-in-cesiumviewerwidget/478/3 "2014-06-02T13:03:10Z")

</div>

Hi,

As a public service announcement for others stumbling on this thread: the syntax for the BaseLayerPicker has changed since this thread started. As of b28 I managed to create my own replacement using these steps:

New HTML on my page:  
\<div id="baseLayerPickerContainer" style="position:absolute;top:24px;right:24px;width:38px;height:38px; border:3px solid red"\>\</div\>

var viewer = new Cesium.Viewer('cesiumContainer',{imageryProvider:false, baseLayerPicker:false});

var imageryViewModels = ; // I populate this as an array of ProviderViewModel objects  
... populate it here...

var blp2 = new Cesium.BaseLayerPicker('baseLayerPickerContainer', {  
// globe: Cesium.Ellipsoid.WGS84, // Psych! this is wrong.  
&nbsp;&nbsp;globe:viewer.scene, // Yep, this is right  
&nbsp;&nbsp;imageryProviderViewModels : imageryViewModels  
&nbsp;&nbsp;});