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
Solved! Go to 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");
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");
That works, thanks Kelly!
FYI, the id property on the Basemap will appear in the documentation in the beta2 release.
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
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?
Try adding it to esri/basemaps - there's a sample in the api ref showing how this works:
perfect - thanks.