how to change a CesiumJS viewer's baselayer url

i am using a CesiumJS instance to display a base map of the earth using a imageryProvider from source A.

var viewer = new Cesium.Viewer('cesiumContainer', imageryProvider:providerA);

Now while using the Viewer I would like to be able to change this map to get images from providerB at a certain event.

I tried:

viewer.scene.imageryLayers.get(0).imageryProvider.url = providerB.url

However that does not seem to work and also feels quite like hack anyway. I could not find anything in Cesium's documentation . Is this at all possible without restarting / recreating the viewer instance? I know that there is a Cesium.BaseLayerPicker (https://cesium.com/docs/cesiumjs-ref-doc/BaseLayerPicker.html) However I do not see what method this picker calls on "select" )

Thanks a lot.

Solution

The BaseLayerPicker widget calls this code when the user selects a new layer.

There's a lot of boilerplate widget management in that block of code, but for your sake, only a couple of the lines are critical. First, the old existing active imagery layer is searched for, and removed:

    imageryLayers.remove(layer);

Then, a new imagery provider is constructed and added at index 0, the first position, which is the base imagery layer:

    imageryLayers.addImageryProvider(newProviders, 0);