[Users] Workaround for google layers not playing nice with treepanel

Baginski, Thomas A. Baginski3 at llnl.gov
Thu May 27 22:38:00 CEST 2010


Hi Phil,

I saw your posting regarding problems with google map layers and the GeoExt.tree.LayerContainer.  I was having a similar problem and came up with a workaround that made things work for me in both firefox and IE.  

I found that switching the layer visibility and resizing the mappanel caused the google layer to fill the mappanel when looking at the map in a browser.  I came up with a kludge that gets this to happen programmatically after the treepanel and mappanel have loaded.  I've included a minimal code snippet below that shows the workaround.  The last three lines are what make it work.  Commenting all three lines make it return to the behavior with the map layer not displaying.  Commenting out the last 2 lines causes the behavior with the layer showing but only filling part of the window.  Commenting out just the last line causes the map to fill the mappanel, but not centered on the original center point.  Using all three make it work.

Ext.onReady(function(){
  var map = new OpenLayers.Map();
  map.addLayers([new OpenLayers.Layer.Google(
    "Google Physical",
    {type: G_PHYSICAL_MAP, visibility: true}
  ), new OpenLayers.Layer.Google(
    "Google Streets", 
    {numZoomLevels: 20}
  )]);

  var myLayerStore = new GeoExt.data.LayerStore({
    map: map
  });
  var mapViewer = new Ext.Panel({
    renderTo: 'mapviewerid',
    layout: 'border',
    width: 800,
    height: 600,
    collapsible: false,
    items:[{
        xtype: 'treepanel',
        id: 'westid',
        title: 'West',
        region: 'west',
        width: 200,
        collapsible: true,
        collapsed: true,
        root: new GeoExt.tree.LayerContainer({
          text: 'All Layers',
          layerStore: myLayerStore,
          leaf: false,
          expanded: true
        })
    }, {
      xtype: 'gx_mappanel',
      region: 'center',
      layout: 'fit',
      map: map,
      layers: myLayerStore,
      center: [-122, 38],
      zoom: 5
    }
    ]
  });
  // Kludge to make google and GeoExt.tree.LayerContainer play nice together
  // start with the treepanel collapsed
  // then these three steps in order make it work.
  // The combination of switching layers and causing the mappanel to resize 
  // gets the google layer to fill the mappanel
  map.layers[1].setVisibility(true);
  Ext.getCmp('westid').expand(false);
  map.layers[0].setVisibility(true);
});

The kludge allowed me to move forward.  It should also help debug the problem to figure out what events firing are needed to get google layers GeoExt.tree.LayerContainer to play nice.

Thanks,

Tom Baginski
  




More information about the Users mailing list