Use custom Basemap with BasemapToggle?

[JasonHine]

I'm trying to get the BasemapToggle widget to work with a custom Basemap. The widget needs one of the Map.basemap strings, so I'm feeding my custom Basemap to the Map, and then specifying a Map.basemap string in the widget. This kinda works, but the widget thumbnail and title don't change as expected. I get an Uncaught TypeError: Cannot read property 'thumbnailUrl' of undefined, even if I specify the widget's basemaps property. Could this be a bug?  Code is here: JS Bin - Collaborative JavaScript Debugging

[KellyHutchins · Accepted solution]

Not sure if its required but everything seems to work if I add an id to the base map. Here's a revised bit of your code that shows the change I made:

            var myBasemap = new Basemap({
                baseLayers: myBaseLayersCollection,
                title: "My Basemap",
                id: "CustomBasemap"
            });




            map = new Map({
                basemap: myBasemap
            });


            view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 4,
                center: [15, 65]
            });


            // basemap toggle widget
            var toggle = new BasemapToggle({
               map: map,
                basemap: "streets",
                basemaps: {
                    "CustomBasemap": {
                        "title": "My Basemap",
                        "thumbnailUrl": "http://js.arcgis.com/4.0beta1/esri/images/basemap/satellite.jpg"
                    },
                    "streets": {
                        "title": "Streets",
                        "thumbnailUrl": "http://js.arcgis.com/4.0beta1/esri/images/basemap/streets.jpg"
                    }
                }
            }, "toggleDiv");

[JasonHine]

That works, thanks Kelly!

[KristianEkenes]

FYI, the id property on the Basemap will appear in the documentation in the beta2 release.

[StephenLead]

Hi Kelly Hutchins,

How would this work using v3.16 of the API? According to BasemapToggle | API Reference | ArcGIS API for JavaScript​​

NOTE: Basemap objects created using the esri/basemaps class may also be passed as values to this property.

What "value" should be used? I've tried a variety of options at this Edit fiddle - JSFiddle but haven't been able to avoid the "Cannot read property 'thumbnailUrl' of undefined" error.

Thanks,

Steve

[StephenLead]

Derek Swingley wrote a sample at javascript - How to Use Custom Basemaps with BasemapToggle widget? - Geographic Information Systems ... but this is now failing for me using v3.16.

It appears that it's no longer possible to access the esriConfig.defaults.map.basemaps object?

[KellyHutchins]

Try adding it to esri/basemaps - there's a sample in the api ref showing how this works:

esri/basemaps | API Reference | ArcGIS API for JavaScript

[StephenLead]

perfect - thanks.