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.