# Change imagery provider runtime using Cesium.Widget

**URL:** <https://community.cesium.com/t/change-imagery-provider-runtime-using-cesium-widget/3849>\
**Category:** CesiumJS\
**Created:** [March 10, 2016, 3:58pm UTC](https://community.cesium.com/t/change-imagery-provider-runtime-using-cesium-widget/3849 "2016-03-10T15:58:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aristeidis\_Bampakos](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/aristeidis_bampakos/32/2013_2.png) [@Aristeidis\_Bampakos](https://community.cesium.com/u/Aristeidis_Bampakos)\
**Post date:** [March 10, 2016, 3:58pm UTC](https://community.cesium.com/t/change-imagery-provider-runtime-using-cesium-widget/3849/1 "2016-03-10T15:58:10Z")

</div>

Hi,

I have the following code that creates a cesium widget:

var viewer = new Cesium.CesiumWidget('cesiumContainer');

Bing provider is loaded by default, as the documentation states. How can I change the provider runtime? I tried the following snippet with no luck. The old provider disappears but the globe shows only in blue.

var layers = viewer.imageryLayers;  
layers.remove(layers.get(0));  
layers.addImageryProvider(layer);

Please note that layer is an object that I get from Cesium.createDefaultImageryProviderViewModels collection.

Thanks

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\
**Post date:** [March 10, 2016, 4:27pm UTC](https://community.cesium.com/t/change-imagery-provider-runtime-using-cesium-widget/3849/2 "2016-03-10T16:27:33Z")

</div>

Hello,

Checkout our our Imagery Layers tutorial for how to change your default imagery and add other imagery to the globe: [http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Imagery%20Layers.html&label=Showcases](http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Imagery%20Layers.html&label=Showcases)

Best,

Hannah

---

<div class="post-metadata">

**Author:** ![Aristeidis\_Bampakos](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/aristeidis_bampakos/32/2013_2.png) [@Aristeidis\_Bampakos](https://community.cesium.com/u/Aristeidis_Bampakos)\
**Post date:** [March 10, 2016, 4:36pm UTC](https://community.cesium.com/t/change-imagery-provider-runtime-using-cesium-widget/3849/3 "2016-03-10T16:36:54Z")

</div>

Hi Hannah,

So, as I can see the only way to change default imagery, is to create a new viewer object?

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\
**Post date:** [March 10, 2016, 5:57pm UTC](https://community.cesium.com/t/change-imagery-provider-runtime-using-cesium-widget/3849/4 "2016-03-10T17:57:24Z")

</div>

No, you can use the [ImageryLayerCollection.remove](http://cesiumjs.org/Cesium/Build/Documentation/ImageryLayerCollection.html#remove) function to remove an existing layer.  
Here is an example how to change the default imagery layer:

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

var layers = viewer.imageryLayers;  
var baseLayer = layers.get(0);  
layers.remove(baseLayer);  
layers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({  
url : ‘[//server.arcgisonline.com/ArcGIS/rest/services/World\_Street\_Map/MapServer](https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer)’  
}));

``

Best,

Hannah

---

<div class="post-metadata">

**Author:** ![Aristeidis\_Bampakos](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/aristeidis_bampakos/32/2013_2.png) [@Aristeidis\_Bampakos](https://community.cesium.com/u/Aristeidis_Bampakos)\
**Post date:** [March 10, 2016, 6:15pm UTC](https://community.cesium.com/t/change-imagery-provider-runtime-using-cesium-widget/3849/5 "2016-03-10T18:15:03Z")

</div>

That actually worked.Thank you veru much for your help!