Replace basemasp by own maps in the Switch Basemap window

JoseSanchez

Hi all

In this sample I would like to replace the  maps in the Switch Basemap window by my own  maps. The goal is to allow the user to choose between several themes for his/her map: standard view, utilities view, business view, field view, engineering view, etc   

How can I customize this window?

http://developers.arcgis.com/en/javascript/samples/widget_basemap/

Regards

JasonZou

After some thoughts, actually customizing the BasemapGallery is a working way to implement your theme switcher. Andy provides a sample code. Here is the idea.

1. Build each map layer using BasemapLayer.
2. Build each map theme using Basemap fed with the list of basemap layers built in step 1.
3. Build a BasemapGallery instance fed with the map themes built in step 2.

Here is the sample code assuming you are using AMD style. If non-AMD style, then replace the class name with the fully qualified names, like esri.dijit.BasemapGallery for BasemapGallery. Be sure to set showArcGISBasemaps to false.

var mapLayer1 = new BasemapLayer({url:"mapService1/rest/url"});
var mapLayer2 = new BasemapLayer({url:"mapService2/rest/url"});
var mapLayer3 = new BasemapLayer({url:"mapService3/rest/url"});

var mapTheme1 = new Basemap({
    layers: [mapLayer1, mapLayer2],
    title: "Map Theme 1",
    thumbnailUrl:"images/mapTheme1.png"
});

var mapTheme2 = new Basemap({
    layers: [mapLayer1, mapLayer3],
    title: "Map Theme 2",
    thumbnailUrl:"images/mapTheme2.png"
});

var basemapGallery = new BasemapGallery({
    showArcGISBasemaps: false,
    basemaps: [mapTheme1, mapTheme2],
    map: map
}, domConstruct.create('div'));

Hope it helps.