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

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

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