<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Google/Map Panl Bug test</title>
<script type="text/javascript" src="JQuery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="ext-3.1.1/adapter/jquery/jquery-adaptor.js"></script>
<script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="ext-3.1.1/ext-all-debug.js"></script>
<script type="text/javascript" src="proj4js/lib/proj4js-compressed.js"></script>
<script type="text/javascript" src="OpenLayers-2.9/OpenLayers.js"></script>
<script type="text/javascript" src="GeoExt0.7/script/GeoExt.js"></script>
<script type="text/javascript" language="javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAR7YD2FMuJnK6_0QbbbF44hS3s4pSqQ84owDwZe7riLV-_wB94xRGhe29tjh7Jrc8S8JJWUWq19mq-A"></script>
<script type="text/javascript" src="GroupTab.js"></script>
<script type="text/javascript" src="GroupTabPanel.js"></script>
<link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" type="text/css" />
<link rel="stylesheet" href="css/pbe.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="GroupTab.css" type="text/css" />
<link rel="stylesheet" href="css/index.css" type="text/css" />
</head>
<body style="margin:5; padding:0; height:100%; width:100%; border:none;">
<script type="text/javascript"><!--
var map;
var p4326 = new OpenLayers.Projection("EPSG:4326");
var p900913 = new OpenLayers.Projection("EPSG:900913");
function loadGoogle(){
fullBounds = new OpenLayers.Bounds(161.0,-50.0,179.99,-31.0);
fullBounds.transform(p4326,p900913);
var options = {
projection: p900913,
displayProjection: p4326,
units: "m",
numZoomLevels: 18,
maxResolution: 156543.0339,
maxExtent: fullBounds
};
map = new OpenLayers.Map("map", options);
var glayers=[];
var glayer = new OpenLayers.Layer.Google( "Google Hybrid" , {type: G_HYBRID_MAP,sphericalMercator: true, showInLegend: true });
glayers[glayers.length]=glayer;
glayer.group = "Google";
var glayer = new OpenLayers.Layer.Google( "Google Normal" , {type: G_NORMAL_MAP,sphericalMercator: true, showInLegend: true});
glayers[glayers.length]=glayer;
glayer.group = "Google";
var glayer = new OpenLayers.Layer.Google( "Google Physical" , {type: G_PHYSICAL_MAP,sphericalMercator: true, showInLegend: true});
glayers[glayers.length]=glayer;
glayer.group = "Google";
map.addLayers(glayers);
// Assign the map to mapPanel
mapPanel.map = map;
// Replace the layers (not automatically replaced when map assigned)
l = new GeoExt.data.LayerStore({
map:map
});
mapPanel.layers = l;
map.zoomToExtent(fullBounds);
var groups = ["Google"];
var layercontainers = []
for (i = 0; i < groups.length;i++){
layercontainers[i] = {
nodeType: "gx_layercontainer",
text:groups[i],
layerStore: mapPanel.layers,
leaf:false,
expanded:true,
loader:{
group: groups[i],
filter:function(record){
return record.get("layer").group == this.group;
}
}
};
}
tree.setRootNode({
nodeType: "async",
children: layercontainers
});
grppanel.items.items[1].setActiveTab(grppanel.items.items[1].getMainItem());
}
// create map panel
mapPanel = new GeoExt.MapPanel({
title:"Map Panel",
bodyBorder:false,
border:false,
header:false,
zoom:5,
collapsible: false,
region:'center'
});
var tree = new Ext.tree.TreePanel({
border: true,
loader: new Ext.tree.TreeLoader({
applyLoader: false
}),
title: "Layers",
region:"west",
width: 200,
split: true,
collapsible: true,
collapseMode: "mini",
autoScroll: true,
rootVisible: false,
lines: false
});
var grppanel = new Ext.ux.GroupTabPanel({
region:'center',
tabWidth:130,
tabPosition:'left',
activeGroup: 0,
items: [{
mainItem:0,
id: 'ContentsGroup',
items: [{
title: 'Contents',
tabTip: 'Select a map theme from the contents',
//style: 'padding: 10px;',
layout: 'fit',
bodyCfg : { cls:'x-panel-med-background' , style: {'background-color':'#005DA2'} },
html: '<p><table border="0" width="800" height="695" >'
+ '<tr><td class="bodytext"> </td><td class="bodytext"> <a onClick="loadGoogle(); ">Load Google Map</a></td></tr>'
+ '</table></p>'
}]
},{
mainItem:0,
id: 'MyMap',
items: [{
title: 'Map',
tabTip: 'show map',
//style: 'padding: 10px;',
layout: 'border',
hidden: true,
bodyCfg : { cls:'x-panel-med-background' , style: {'background-color':'#0E5F97'} },
items:[tree,mapPanel]
}]
}]
});
var viewport = new Ext.Viewport({
layout:'border',
items:[grppanel]
});
//-->
</script>
</body>
</html>