Basemap Toggle not working on 3.11 with custom basemaps!

Question

Hi everyone,

I am consuming an ArcGIS Dynamic Map service and 2 basemaps on which I want to apply a BasemapToggle.

Any idea why this code is not working?

//Toggle

//console.log(esriConfig.defaults.map.basemaps);

esriConfig.defaults.map.basemaps.BaseMapEnglish = {

baseMapLayers: [

{ url: "http://geoportal.abudhabi.ae/rest/services/BaseMapEnglish/MapServer" }

],

title: "BaseMapEnglish"

};

esriConfig.defaults.map.basemaps.BaseMapSatellite = {

baseMapLayers: [

{ url: "http://geoportal.abudhabi.ae/rest/services/BaseMapSatellite1m/MapServer" }

],

title: "BaseMapSatellite"

};

console.log(esriConfig.defaults.map.basemaps);

var toggle = new BasemapToggle({

map: map,

basemap: "BaseMapSatellite",

basemaps: {

BaseMapEnglish: {

label: "BaseMapEnglish",

url: "http://www.delorme.com/images/homepage/dbm_icon.jpg"

},

BaseMapSatellite: {

label: "BaseMapSatellite",

url: "http://js.arcgis.com/3.7/js/esri/dijit/images/basemaps/topo.jpg"

}

}, "BasemapToggle");

toggle.startup();

//Toggle

var MDServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://10.10.1.108:6080/arcgis/rest/services/ZS_MapDoc/MapServer",

{

"id": 'ZS',

"opacity": 0.6

});

var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://geoportal.abudhabi.ae/rest/services/BaseMapSatellite50cm/MapServer");

map.addLayer(basemap);

map.addLayer(MDServiceLayer);

Please help.

I basically referred to the following URL for my work but it doesn't seem to be working from my side.

Basemap Toggle | ArcGIS API for JavaScript

MattDriscoll · Answer

Hello, It's because the default basemap is topo and it doesnt know what topo is. This will be easier in 3.12 to set custom basemaps and use them with the BasemapToggle widget. This should work: Basemap Toggle

DavidColey · Answer

In order to use the basemap dijit, just take a look at the api sample here:

Basemap Toggle | ArcGIS API for JavaScript

The toggle is designed to switch from an esri defualt base map to a second esri base map, like the ArcGIS satellite.  Since you are tyring to add custom basemaps, you should use the baseMap gallery dijit.  After the basemap loads, set up and call a createBaseMap funcition, pushing the basemap as defined by the basemapLayer into a basemaps array:

createBasemapGallery();
  function createBasemapGallery(){
  var basemaps = [];

var wrldStreets = new Basemap({
        layers: [new BasemapLayer({
        url:"http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
        })],
        title: "World Streets",
        thumbnailUrl:"css/WorldStreets_r1.png"
        });
        basemaps.push(wrldStreets);

Then, set up an image base map layer and push that into the array as well:

var wrldImg = new BasemapLayer({
    url:"http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
  });

var img2014Bm = new Basemap({
    layers:[wrldImg],
    title:"2014 Imagery",
    thumbnailUrl:"css/Aerial2013r2.png"
  });
basemaps.push(img2014Bm);

Then add the basemaps array to the basemap Gallery:

var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: false,
        basemaps: basemaps,
        map: mapMain
        }, "basemapGallery");
        basemapGallery.startup();
        
        basemapGallery.on("error", function(msg) {
          console.log("basemap gallery error:  ", msg);
        });
  }

Be sure to close the function, no need to call the default esri base map or on a load event, or load the basemap layers with an on-style event.

yanivarazi · Answer

what say your console ?????