[Users] Multiple Maps in Tabs and multiple Layer Trees
Andreas Hocevar
ahocevar at opengeo.org
Tue Dec 8 23:37:21 CET 2009
Hi,
I did not look at your code, but see some answers inline.
Dan Ramage wrote:
> 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.
>
This sounds like you did not set the layerStore in your node
configuration. By default, if not specified, a node uses the layerStore
of the first mapPanel it finds.
> 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.
Exactly. You have to tell the node (layerStore) or the loader (store)
which store to use.
Regards,
Andreas.
> 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);
> }
>
> _______________________________________________
> Users mailing list
> Users at geoext.org
> http://www.geoext.org/cgi-bin/mailman/listinfo/users
>
--
Andreas Hocevar
OpenGeo - http://opengeo.org/
Expert service straight from the developers.
More information about the Users
mailing list