[Users] Multiple Maps in Tabs and multiple Layer Trees

[Dan Ramage]

All,

I'm working on a project where I want 2 maps in map panels that are on tabs.
I seem to have that somewhat working. However, each map needs a unique
layertree, and that is where my issue is.
If you look here: http://rcoos.org/carolinasrcoosrev2/carolinasrcoos.html#
what I have done is added the 2 layer trees at the same time to the
viewport, this is not what I intended to use as the final product, I want to
use the listener "activate" when the map panel tab changes to load the
appropriate layer tree. What seems to be happening is the layertree for the
first map tab correctly loads, in the link above it is the Real Time Layers
tre. The Archive Layers tree seems to load the correct groups, however the
layers under the groups is not correct. 
Under the Base Layer group, there should only be the Google Terrain, however
it has the 3 layers from the Real Time Layers. The Map Overlay group is
correct, however I suspect that is only because it is the same in the Real
Time Layers. The Archives and MARMAP group should have children, however
they are not there.
I did create some simple nodes, not using "x_baselayercontainer" but just
adding a node per layer and that worked correctly. My thought is that during
the rendering process that when it comes time to place the layer under its
group, only one LayerStore is being accessed. This is just a guess but after
adding a breakpoint in the node filter function, I only saw layers from one
map getting used.

Please excuse the spaghetti code, I've been learning a lot of javascript and
ExtJs as I go.

I appreciate any thoughts.


Here is the snippet of how I create the view port and the layer trees:

var tree = createLayerTree(this.map.layers,"Real Time Layers");
var archiveTree = createLayerTree(this.archiveMap.layers,"Archive Layers");
viewport = new Ext.Viewport({
    layout:'border',
    items:[
        new Ext.BoxComponent({ // raw
            region: 'north',
            el: 'header'
        }),
        {
            region: 'west',
            id: 'west-panel',
            title: ' ',
            split: true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: true,
            margins: '0 0 0 5',
            layout: 'accordion',
            layoutConfig:{
                animate: true
            },
            items: [
            tree,
            archiveTree,
            {
                title: 'Map Legend',
                id: 'legend',
                height: 0.5 * Ext.getBody().getViewSize().height,
                html: generateLegendHtml(),
                border: true,
                autoScroll: true
            },
            {
                title: 'Help',
                autoScroll: true,
                //autoLoad: {url:'doc/product_selector.html',scripts:true},
                border: true                        
            }
            
            ]
        },                
        {
          region:'center',
          xtype: 'tabpanel',
          id: 'OLMap',
          deferredRender:false,
          activeTab: 0,
          layoutOnTabChange : true,  
          items:[
            {
              title: 'Realtime Map',
              layout: 'fit',
              xtype: 'gx_mappanel',
              map: map,
              tbar: toolbar,
              height: 800,
              width: 800,
              //listeners: {activate: activateRealtimeMap},
            },
            {
              title: 'Archive Map',
              layout: 'fit',
              xtype: 'gx_mappanel',
              map: archiveMap,
              tbar: toolbar,
              height: 800,
              width: 800,
              //listeners: {activate: activateArchiveMap},

            }                    
          ]
        }
     ]
});

When creating the nodes for the layer tree, I just use a loop and run
through the map layers and build the nodes on the fly. I also have some
unique hash keys that I use in the layers such as GROUP so I can group the
layers as I need. In the node attributes, I add a "group" key as well.

function createLayerTree(layers,name)
{
  var nodes = buildTreeNodes(layers);
 
  // create the tree with the configuration from above
  var tree = new Ext.tree.TreePanel({
      id: name,
      contentEl: 'west',
      title: name,
      border: false,
      loader: new Ext.tree.TreeLoader({
          // applyLoader has to be set to false to not interfer with loaders
          // of nodes further down the tree hierarchy
          applyLoader: false
      }),
      root: {
          nodeType: "async",
          children: nodes
      },
      listeners: {
          //"insert": insertRadio,
          "append": registerRadio
      },
      rootVisible: false,
      lines: false
  });
  return(tree);
  
}
function buildTestTreeNodes(layers)
{
  var treeNodes = [];
  for (var i = 0; i < layers.length; i++)
  {
    node = 
    {
      expanded: true,
      text: layers[i].name,          
      leaf: true
    };
    treeNodes.push(node);
  }
  return(treeNodes);
}
function buildTreeNodes(layers)
{
  emptyGroupName = "";
  var treeNodes = [];
  //Add the base layer container node since we know we'll have this.
  treeNodes.push(        
                  {
                    nodeType: "gx_baselayercontainer",
                    expanded: true
                  }
                );
  for (var i = 0; i < layers.length; i++)
  {        
    var layer = layers[i];
    // jump over layers, which should not be displayed 
    if (layer.displayInLayerSwitcher == false || layer.isBaseLayer) 
    {
        continue;
    }
    if( layer.options.GROUP == undefined )
    {
      layerGroup = emptyGroupName;
    }            

    var foundGrp = false;
    var Len = treeNodes.length;
    var ndx = -1;
    for(var j = 0; j < Len; j++)
    { 
      if( treeNodes[j].text == layer.options.GROUP )
      {
        foundGrp = true;
        break;
      }          
    }
    if(!foundGrp)
    {
      var node;
      if(layer.options.QUERYABLE != undefined && layer.options.QUERYABLE)
      {
        node = 
        {
          text: layer.options.GROUP,
          nodeType: "gx_layercontainer",
          expanded: true,
          // render the nodes inside this container with a radio button,
          // and assign them the group "foo". See the registerRadio function
          // in the code that we use as handlers for the tree's insert and
          // append events to make these radio buttons change the active
layer.
          loader:
          {
            baseAttrs:
            {
              radioGroup: 'radioGroup',
              group: layer.options.GROUP
            },
            filter: displayLayerInGroup
          }
        };
      }
      else
      {
        node = 
        {
          text: layer.options.GROUP,
          nodeType: "gx_layercontainer",
          expanded: true,
          loader:
          {
            baseAttrs:
            {
              group: layer.options.GROUP
            },
            filter: displayLayerInGroup
          }
        };
      }
      treeNodes.push(node);
    }
  }
  return(treeNodes);    
}
function displayLayerInGroup(record)
{
  if(this.store.data.items.length < 15)
  {
    var i = 0;
  }
  var layer = record.get("layer");
  if(layer.displayInLayerSwitcher)
  {
    if(layer.options.GROUP == this.baseAttrs.group)
    {
      return(true);
    }
  }
  return(false);                
}