Adding Image with Labels to BasemapGallery

[MarkHoover]

The constant shuffling of order and maps present in the Basemap Gallery is quite annoying.  I wish a basic Basemap Gallery was set, and then if we users decide we want to include new Basemaps like the National Geographic one, we could do so with the corresponding code:

            //create Terrain Basemap for Gallery             var terrainLayer = new esri.dijit.BasemapLayer({                 url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"             });             var terrainBasemap = new esri.dijit.Basemap({                 layers: [terrainLayer],                 title: 'Terrain',                 thumbnailUrl: 'http://www.arcgis.com/sharing/content/items/11742666e55b45b8a508751532d0c1ea/info/thumbnail/Terrain_ne_usa.png'             });             basemapGallery.add(terrainBasemap);

Anyway, that's not my issue right now.  Because of the reordering and such, I am in the process of rearranging everything into the order that we had previously, with the Bing maps in the first row, Esri Imagery and Road in the next row and so on.  My process for doing so is removing all the layers that are out of order, and then adding them back to the Gallery in the order I'd like.

My question is, how do I add the Imagery with Labels Basemap back into the Gallery.  This Basemap relies on two services, the URLs of which are:

http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer
http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServe...

The url parameter for creating a new Basemap as shown above only accepts one URL, however.

Can I accomplish what I'm intending here?

[ChristopherPollard]

Nianwei,
Thanks for the quick reply and the code to manually create basemap layers based on your gmapsgalley example.This will surely come on in handy.

Anway, since the gmapslayers example http://gmaps-utility-gis.googlecode.com/svn/trunk/agsjs/examples/gmapslayer.html
is different and doesn�??t build a basemap gallery I actually had a co-worker help me modify the ChangeMap function from the gmapslayer example to include a �??for�?? statement that looks for an Array of tiledmap services. Not sure if this is the right way but it gets me what I need for this project. enjoy!

function changeMap(onLayer) {
   for (var j = 0, jl = map.layerIds.length; j < jl; j++) {
                var layer = map.getLayer(map.layerIds);
                if (layer instanceof esri.layers.ArcGISTiledMapServiceLayer || layer instanceof agsjs.layers.GoogleMapsLayer) {
                    layer.hide();
                    if (layer == googleLayer) {
                       esri.hide(dojo.byId("layer_list"));
                    }
    }
   }
       
    if (!(onLayer instanceof Array)) onLayer = [onLayer]; 
      for ( var i = 0;i< onLayer.length; i++){ 
     for (var j = 0, jl = map.layerIds.length; j < jl; j++) {
                var layer = map.getLayer(map.layerIds);
                if (layer instanceof esri.layers.ArcGISTiledMapServiceLayer || layer instanceof agsjs.layers.GoogleMapsLayer) {
                  if (layer == onLayer) {
                    layer.show();
                    if (layer == googleLayer){
                      esri.show(dojo.byId("layer_list"));
                    }
                  }
                }
              }
            
  }

<div id="buttons" >
<button dojoType="dijit.form.Button" onClick="changeMap(googleLayer);googleLayer.setMapTypeId(agsjs.layers.GoogleMapsLayer.MAP_TYPE_ROADMAP)">
  Google Street
 </button>
<button dojoType="dijit.form.Button" onClick="changeMap(googleLayer);googleLayer.setMapTypeId(agsjs.layers.GoogleMapsLayer.MAP_TYPE_SATELLITE)">
 Google Statellite
  </button>
 <button dojoType="dijit.form.Button" onClick="changeMap(googleLayer);googleLayer.setMapTypeId(agsjs.layers.GoogleMapsLayer.MAP_TYPE_HYBRID)">
 Google Hybrid
 </button>
<button dojoType="dijit.form.Button" onClick="changeMap(esriTopo);">
 ESRI Topo Map
</button>
<button dojoType="dijit.form.Button" onClick="changeMap(esriStreet);">
 ESRI Street
</button>
<button dojoType="dijit.form.Button" onClick="changeMap([esriGrey,esriGreyRef]);">
ESRI Grey Map
 </button>
 </div>

[ChristopherPollard]

Amazing code! Exactly what I've needed for my transportation related web mapping apps. Thanks for all your hard work as well as insight, direction, and sample code to help with issues.
Just wondering how to have Google Hybrid be the default basemap that loads first?
Not sure where this is being called (in either of your gmaps examples).
I triied switching the order of how the basemaps are being called and that works fine with the ESRI basemaps but when
any of the Google basemaps are first nothing loads.

Thanks again.

[NianweiLiu]

It is not easy, if not impossible, to intercept the event firing sequence in BasemapGallery's private methods. As a result, the Google maps can only be loaded upon the first public event "onSelectionChange" is fired, which means they can not be automatically loaded. However, you can assign it an ID and manually load it. You may need to put your default basemap as first entry in the list to have consistent UI.

              var basemaps = [];
              basemaps.push(new esri.dijit.Basemap({
                layers: [new esri.dijit.BasemapLayer({
                  type: 'GoogleMapsHybrid'
                })],
                title: "Google Hybrid",
                id:'GoogleHybrid',
                thumbnailUrl: dojo.moduleUrl("agsjs.dijit", "images/googlehybrid.png")
              }));
... then
              basemapGallery.startup();
              basemapGallery.select('GoogleHybrid');
              

Example:
http://gmaps-utility-gis.googlecode.com/svn/trunk/agsjs/examples/manualgallery.html