Using Custom Basemaps with BasemapToggle widget

Question

I'm trying to upgrade my app from version 3.3 to version 3.7 of the ArcGIS JavaScript API and am switching out the basemap gallery for the new BasemapToggle widget.

I have two custom basemaps that I want to use in my app using BasemapToggle.

Is this possible?

The API homepage suggests it is but I haven't seen a sample or any documentation on how to do it properly.

Can anybody point me towards a solution or example of how to use my own basemaps with this widget?

I'm trying to do this with two basemaps, loading one of them as the initial basemap and then being able to toggle between them. My attempt at Derek's answer is HERE

• Derek Swingley: Adding a comment here so you can check out my edited answer below showing how to use a custom basemap with the basemap toggle.
• Craig: @DerekSwingley thanks again. I've been trying it out so that it uses 2 custom basemaps and loads one of them from the start as well. No luck yet but I'm sure I'll get there.
• Derek Swingley: edit your question to include your code or the URLs for the services you want to use? Maybe I can sort it out for you.
• Craig: @DerekSwingley Please see my edit above. Thanks for the help.
• Derek Swingley: try this: jsbin.com/iFakeLa/5

Answer 1

The BasemapToggle can only use basemaps from arcgis.com. I'll get the text on the page you referenced updated, it shouldn't say you can use your own custom basemaps. I apologize for the mistake.

It is possible to use custom maps with the basemap toggle, but it takes a little work. First, load the default API config object and put info for your basemaps on esriConfig.defaults.map.basemaps:

require([
 "esri/map", 
 "esri/dijit/BasemapToggle", 
 "esri/config",
 "dojo/domReady!"
], function(
 Map, BasemapToggle, esriConfig
) {
 console.log(esriConfig.defaults.map.basemaps);
 esriConfig.defaults.map.basemaps.delorme = {
 baseMapLayers: [
 { url: "http://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer" }
 ],
 title: "Delorme"
 };

Then specify both basemap and basemaps when you create the toggle:

toggle = new BasemapToggle({
 map: map,
 basemap: "delorme",
 basemaps: {
 delorme: {
 label: "delorme",
 url: "http://www.delorme.com/images/homepage/dbm_icon.jpg"
 }, topo: {
 label: "topo",
 url: "http://js.arcgis.com/3.7/js/esri/dijit/images/basemaps/topo.jpg"
 }
 }
}, "BasemapToggle");
toggle.startup();

Working page on jsbin: http://jsbin.com/iFakeLa/1

• D.E.Wright: Sounds like a prime item for a enhancement; we were looking at that ourselves...
• Craig: Thanks Derek. Perhaps this could get worked into the next update.
• Derek Swingley: @D.E.Wright updated to show an example of how to customize the widget to use custom maps
• Stephen Lead: see my answer below for an update for newer versions of the JS API

Answer 2

It appears that Derek's answer above no longer works at version 3.16 of the JS API.

An update came from Kelly Hutchins at Esri, and is to add the custom basemap to esri/basemaps as shown at https://developers.arcgis.com/javascript/3/jsapi/esri.basemaps-amd.html

require([
 "esri/basemaps",
 "esri/map",
 "dojo/domReady!"
 ], function (esriBasemaps, Map){
 esriBasemaps.delorme = {
 baseMapLayers: [{url: "https://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer"}],
 thumbnailUrl: "https://www.example.com/images/thumbnail_2014年11月25日_61051.png",
 title: "Delorme"
 };
 var map = new Map("ui-map", {
 basemap: "delorme",
 center: [-111.879655861, 40.571338776], // long, lat
 zoom: 13,
 sliderStyle: "small"
 });
});

Once the custom basemap has been added to esri/basemaps it can be used in the basemapToggle in the same manner as a default basemap:

 var toggle = new BasemapToggle({
 map: map,
 basemap: "satellite",
 basemaps:
 {
 "delorme":{
 "title":"delorme",
 "thumbnailUrl":"https://www.example.com/images/thumbnail_2014年11月25日_61051.png"
 },
 "satellite":{
 "title":"satellite",
 "thumbnailUrl":"https://js.arcgis.com/3.15/esri/images/basemap/satellite.jpg"
 }
 }
 }, "BasemapToggle");
 toggle.startup();