topic Re: Use custom Basemap with BasemapToggle? in ArcGIS JavaScript Maps SDK Questions

Use custom Basemap with BasemapToggle?

JasonHine — Tue, 25 Aug 2015 23:28:28 GMT

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

Re: Use custom Basemap with BasemapToggle?

KellyHutchins — Sun, 12 Dec 2021 05:46:44 GMT

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");

Re: Use custom Basemap with BasemapToggle?

JasonHine — Wed, 26 Aug 2015 14:19:33 GMT

That works, thanks Kelly!

Re: Use custom Basemap with BasemapToggle?

KristianEkenes — Wed, 26 Aug 2015 19:35:09 GMT

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

Re: Use custom Basemap with BasemapToggle?

StephenLead — Tue, 07 Jun 2016 22:15:22 GMT

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

Re: Use custom Basemap with BasemapToggle?

StephenLead — Tue, 07 Jun 2016 22:29:02 GMT

Derek Swingley wrote a sample at javascript - How to Use Custom Basemaps with BasemapToggle widget? - Geographic Information Systems Stack Exchange 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?

Re: Use custom Basemap with BasemapToggle?

KellyHutchins — Tue, 07 Jun 2016 22:53:05 GMT

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

Re: Use custom Basemap with BasemapToggle?

StephenLead — Wed, 08 Jun 2016 01:56:08 GMT

perfect - thanks.