# BingMapsImageryProvider.fromUrl() error

**URL:** <https://community.cesium.com/t/bingmapsimageryprovider-fromurl-error/25640>\
**Category:** CesiumJS\
**Created:** [July 26, 2023, 2:52pm UTC](https://community.cesium.com/t/bingmapsimageryprovider-fromurl-error/25640 "2023-07-26T14:52:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![epok82](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/epok82/32/14794_2.png) [@epok82](https://community.cesium.com/u/epok82)\
**Post date:** [July 26, 2023, 2:52pm UTC](https://community.cesium.com/t/bingmapsimageryprovider-fromurl-error/25640/1 "2023-07-26T14:52:54Z")

</div>

Hi to all, in my web app I would like to reproduce the behaviour of Cesium.Viewer baseLayerPicker in order to pick the “default” layer provided by Cesium (for example “Bing Maps Aerial”).  
I’ve a radio buttons list, each radio button activates a specific layer.  
For example, BING-AERIAL radio button behaviour is the following:

```auto
const layers = this.viewer?.scene.imageryLayers;
var baseLayer = layers?.get(1);
if (baseLayer) layers?.remove(baseLayer);
layers?.addImageryProvider(
        Cesium.BingMapsImageryProvider.fromUrl(
          "https://dev.virtualearth.net", {
            key: "MYKEY",
            mapStyle: Cesium.BingMapsStyle.AERIAL
        })
      );

```

but on Chrome console I got this error:

```auto
ERROR TypeError: Cannot read properties of undefined (reading 'tileXYToRectangle')
    at new GE (node_modules\cesium\Build\Cesium\Cesium.js:9565:174)
    at GE.createPlaceholder (node_modules\cesium\Build\Cesium\Cesium.js:9565:455)
    at new gi (node_modules\cesium\Build\Cesium\Cesium.js:9565:3747)
    at us.addImageryProvider (node_modules\cesium\Build\Cesium\Cesium.js:9565:65834)
    at CesiumDirective.changeMapLayer (cesium.directive.ts:79:15)
    at Object.next (cesium.directive.ts:50:14)
    at ConsumerObserver.next (Subscriber.js:91:33)
    at SafeSubscriber._next (Subscriber.js:60:26)
    at SafeSubscriber.next (Subscriber.js:31:18)
    at Subject.js:34:30

```

Can you help me, please? Thanks a lot.

---

<div class="post-metadata">

**Author:** ![Ankhenaten](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ankhenaten/32/15133_2.png) [@Ankhenaten](https://community.cesium.com/u/Ankhenaten)\
**Post date:** [July 30, 2023, 2:07am UTC](https://community.cesium.com/t/bingmapsimageryprovider-fromurl-error/25640/2 "2023-07-30T02:07:36Z")

</div>

This changes the BaseLayerPicker. Hope this helps.

```auto
const imageryViewModels = Cesium.createDefaultImageryProviderViewModels();
            const selectedProviders = [
                "Bing Maps Aerial",
                "Bing Maps Aerial with Labels",
                "Bing Maps Roads",
                "ArcGIS World Imagery",
                "ArcGIS World Hillshade",
                //"Esri World Ocean",
                "Open­Street­Map",
                //"Stamen Watercolor",
                "Stamen Toner",
                //"Sentinel-2",
                //"Blue Marble",
                //"Earth at night",
                //"Natural Earth II"
            ];

            // Filter the desired providers
            const filteredProviders = imageryViewModels.filter(model => selectedProviders.includes(model.name));

            

            // Create your custom provider
            const customProvider = new Cesium.ProviderViewModel({
                name: 'a name',
                iconUrl: 'https://somepictureurl/cropped-logow2i-2.png', // Updated this line with the provided image URL
                tooltip: 'bla)',
                creationFunction: function () {
                    return new Cesium.UrlTemplateImageryProvider({
                        url: 'someurl/{z}/{x}/{y}.png'
                    });
                }
            });

            // Add the custom provider to the list
            filteredProviders.push(customProvider);

            // Update the BaseLayerPicker's providers
            viewer.baseLayerPicker.viewModel.imageryProviderViewModels = filteredProviders;

            // Force Cesium to refresh the BaseLayerPicker's UI
            viewer.baseLayerPicker.viewModel.selectedItem = customProvider;

```

---

<div class="post-metadata">

**Author:** ![epok82](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/epok82/32/14794_2.png) [@epok82](https://community.cesium.com/u/epok82)\
**Post date:** [July 30, 2023, 3:45pm UTC](https://community.cesium.com/t/bingmapsimageryprovider-fromurl-error/25640/3 "2023-07-30T15:45:48Z")

</div>

Thanks for your replay.  
Rather than modify the baselayerpicker I would like to “emulare” It.  
My goal is to have a button in My front end: once clicked It, a default Cesium imagery provider Will be activated (for example Bing with Aerial).  
Thanks for your help.