[GIS] Using Custom Basemaps with BasemapToggle widget

arcgis-javascript-apibasemap

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

Best Answer

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

Related Question