Defining custom basemap gallery in ArcGIS API for JavaScript?

Question

I'm using arcgis js spi for 3.13 edition, when I using basemaptoggle widget from https://developers.arcgis.com/javascript/jssamples/widget_basemap.html is ok, but when defining my own basemap is doesn't work, the codes are following below, hopefully some one who can help to solve it.

var basemaps[];
//one step define BasemapLayer
        var basemaps = [];
        var fx_image =new esri.dijit.BasemapLayer({
            url: "----"
        });
//second step define BaseMap
            var imageBaseMap1 = new esri.dijit.BaseMap({
                layers: [fx_image],
                title: "fx_image",
                thumbnailUrl: "esri/images/basemap/terrain.jpg"
            });
            basemaps.push(imageBaseMap1);
//another basemap
            var fx_sl = new esri.dijit.BasemapLayer({
                url: "----"
            });
            var imageBaseMap2 = new esri.dijit.BaseMap({
                layers: [fx_sl],
                title: "fx_sl",
                thumbnailUrl: "esri/images/basemap/hybrid.jpg"
            });
            basemaps.push(imageBaseMap2);
     //third step define BaseMapGallery
            var basemapGallery = new esri.dijit.BasemapGallery({
                showArcGISBasemaps: false,
                basemaps: basemaps,
                map: map
            }, "basemapGallery");
            basemapGallery.startup();
            basemapGallery.on("error", function (msg) {
                console.log("basemap gallery error:  ", msg);
            });

---

Sorry for the unreadable code, here is the normal sequence

var basemaps[];       
//one step define BasemapLayer

var fx_image =new esri.dijit.BasemapLayer({url:"http://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer" });

 //second step define BaseMap 

var imageBaseMap1 = new esri.dijit.BaseMap({layers: [fx_image], title:"fx_image", thumbnailUrl: "esri/images/basemap/terrain.jpg"}); 

basemaps.push(imageBaseMap1); 

//another basemap 

var fx_sl = new esri.dijit.BasemapLayer({url:"http://services.arcgisonline.com/arcgis/rest/services/Specialty/Soil_Survey_Map/MapServer"}); 
var imageBaseMap2 = new esri.dijit.BaseMap({layers: [fx_sl],title:"fx_sl",thumbnailUrl: "esri/images/basemap/hybrid.jpg"}); 

basemaps.push(imageBaseMap2); 

//third step define BaseMapGallery 

var basemapGallery = new esri.dijit.BasemapGallery({showArcGISBasemaps:false,basemaps: basemaps,map:map }, "basemapGallery"); basemapGallery.startup(); 

basemapGallery.on("error", function (msg){ console.log("basemap gallery error: ", msg); });

Answer 1

I just separated it out a little bit, create each basemap separately and then add to the gallery. Try this.

    var fx_image =new BasemapLayer({url:"http://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer" });
    var basemap = new Basemap({
        layers: [fx_image],
        title: "fx_image",
        thumbnailUrl: "esri/images/basemap/terrain.jpg"
    })

    var fx_sl = new BasemapLayer({url:"http://services.arcgisonline.com/arcgis/rest/services/Specialty/Soil_Survey_Map/MapServer"});
    var basemap2 = new Basemap({
        layers: [fx_sl],
        title: "fx_sl",
        thumbnailUrl: "esri/images/basemap/hybrid.jpg"
    })

    var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: false,
        //basemaps: basemaps,
        map: map
    }, "basemapGallery");

    basemapGallery.add(basemap);
    basemapGallery.add(basemap2);
    basemapGallery.startup();