Changing Extent on Map Gallery Selection

[GaryFreeman]

I have setup a custom BasemapGallery specifying individual layers for each node.

I am now looking to set unique extents values for each node (esriBasemapGalleryNode). I am looking for a clean way to identify the selected node so I can index or reference extent values I will maintain for each node. I have not been able to identify the nodes index within the gallery from the object returned from a query locating the esriBasemapGallerySelectedNode. I can loop through the basemap array that I used to initialize the gallery with some string parsing and comparing against each ID parsing out the ID from the selected node, but have concerns it could break with future changes to the map gallery dijit.

// 3rd node in the gallery
dojo.query('.esriBasemapGallerySelectedNode')
esriBasemapGallerySelectedNode returned object referenced has an id: "galleryNode_add_2"

// basemap array used to initialize map gallery dijit
basemaps: Array[4]
0: Object
id: "add_0"
layers: Array[1]
thumbnailUrl: "images/....png"
title: "Landbase"
__proto__: Object
1: Object
id: "add_1"
layers: Array[2]
thumbnailUrl: "images/....png"
title: "C Zone"
__proto__: Object
2: Object
id: "add_2"
layers: Array[2]
thumbnailUrl: "images/....png"
title: "F Zone"
__proto__: Object
3: Object
id: "add_3"
layers: Array[2]
thumbnailUrl: "images/....png"
title: "B Zone"
__proto__: Object
length: 4
__proto__: Array[0]




Snippet of code
var zoneLayer = new esri.dijit.BasemapLayer({
          url:"http://.../MapServer",
  visibleLayers:[11,13,14]
        });
var zoneBasemap = new esri.dijit.Basemap({
          layers:[zoneLayer,basemapLayer],
          title:"Zone",
          thumbnailUrl:"images/zoneThumb.png"
        });
        basemaps.push(zoneBasemap);

// Getting selected node... I can extent to do the parsing and comparing
dojo.connect(basemapGallery, "onClick", function(evt) {
  
   var sNode = null;
   sNode = dojo.query('.esriBasemapGallerySelectedNode');
  });

Is there anyway to set a user defined property to each esriBasemapGalleryNode on initialization?
Is there way to get the index of the esriBasemapGallerySelectedNode?
Is there a way to set the ID on each node?

Thanks, Gary

[HemingZhu]

I have setup a custom BasemapGallery specifying individual layers for each node.

I am now looking to set unique extents values for each node (esriBasemapGalleryNode). I am looking for a clean way to identify the selected node so I can index or reference extent values I will maintain for each node. I have not been able to identify the nodes index within the gallery from the object returned from a query locating the esriBasemapGallerySelectedNode. I can loop through the basemap array that I used to initialize the gallery with some string parsing and comparing against each ID parsing out the ID from the selected node, but have concerns it could break with future changes to the map gallery dijit.

// 3rd node in the gallery
dojo.query('.esriBasemapGallerySelectedNode')
esriBasemapGallerySelectedNode returned object referenced has an id: "galleryNode_add_2"

// basemap array used to initialize map gallery dijit
basemaps: Array[4]
0: Object
id: "add_0"
layers: Array[1]
thumbnailUrl: "images/....png"
title: "Landbase"
__proto__: Object
1: Object
id: "add_1"
layers: Array[2]
thumbnailUrl: "images/....png"
title: "C Zone"
__proto__: Object
2: Object
id: "add_2"
layers: Array[2]
thumbnailUrl: "images/....png"
title: "F Zone"
__proto__: Object
3: Object
id: "add_3"
layers: Array[2]
thumbnailUrl: "images/....png"
title: "B Zone"
__proto__: Object
length: 4
__proto__: Array[0]




Snippet of code
var zoneLayer = new esri.dijit.BasemapLayer({
          url:"http://.../MapServer",
  visibleLayers:[11,13,14]
        });
var zoneBasemap = new esri.dijit.Basemap({
          layers:[zoneLayer,basemapLayer],
          title:"Zone",
          thumbnailUrl:"images/zoneThumb.png"
        });
        basemaps.push(zoneBasemap);

// Getting selected node... I can extent to do the parsing and comparing
dojo.connect(basemapGallery, "onClick", function(evt) {
  
   var sNode = null;
   sNode = dojo.query('.esriBasemapGallerySelectedNode');
  });

Is there anyway to set a user defined property to each esriBasemapGalleryNode on initialization?
Is there way to get the index of the esriBasemapGallerySelectedNode?
Is there a way to set the ID on each node?

Thanks, Gary

If you look at the JavaScript API reference, there is no onClick event list on Class: BasemapGallery. I am not sure you could even use something like: dojo.connect(basemapGallery, "onClick", function(evt){});

[GaryFreeman]

That's true, there is no onClick documented, however it does work, at least for now! The question then is how do you work with a custom map gallery. It seems like it is being expanded to allow customizing, but it's not there yet, or not documented. If this is not the direction ESRI is going in I will write my own, but need to find out first, or interest in enhancing.

I have also noticed it does not update the original map instance to reflect the additional layers I have added to each gallery node, it displays them, but they are not found in map.layers to work with.

Thanks, Gary

[HemingZhu]

That's true, there is no onClick documented, however it does work, at least for now! The question then is how do you work with a custom map gallery. It seems like it is being expanded to allow customizing, but it's not there yet, or not documented. If this is not the direction ESRI is going in I will write my own, but need to find out first, or interest in enhancing.

I have also noticed it does not update the original map instance to reflect the additional layers I have added to each gallery node, it displays them, but they are not found in map.layers to work with.

Thanks, Gary

My guess is that because basemap gallery is tied with an div element.  so onClick did work (DOM).