I have searched through the forums on how to do this by using a container DIV
when declaring my overviewmap control and then using the contentEl to put the
overview div into my custom panel but it is still not working. With my below
code for some reason the overviewmap I have does go into the proper div but it
is still directly above my Panel instead of inside it, can anyone assist on
what I am doing wrong? Really appreciate it!
function init()
{
// already defined map layers here
var map;
// begin map defintion
map = new OpenLayers.Map('map',{controls: [],
//scales:
[974000,1867000,3300000,4450000,7075000,14513000,25769000,35654000,58981000,100000000],
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
20037508.34, 20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 20,
units: 'km',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
}); //end of map definition
var container_overview = document.getElementById("overview");
//Define options for overview Map
var options = {layers: [layer_Overview], units: 'km', maxExtent: new
OpenLayers.Bounds(-114.167163950302,52.0782516055391,-113.454306937636,52.4066932849551).transform(new
OpenLayers.Projection("EPSG:4326"), new
OpenLayers.Projection("EPSG:900913")),
numZoomLevels: 1,
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new
OpenLayers.Bounds(-114.167163950302,52.0782516055391,-113.454306937636,52.4066932849551).transform(new
OpenLayers.Projection("EPSG:4326"), new
OpenLayers.Projection("EPSG:900913"))}
var redgisOverview = new OpenLayers.Control.OverviewMap({mapOptions:
options, div: container_overview});
//add Layers to map
map.addLayers([layer_Section_Lines_Base, layer_Base]);
//add controls to Map
map.addControl(redgisOverview); // overview map
//Define Map Longitude/Latitude and Start zoom levels
var startupLat = 52.27210;
var startupLon = -113.80288;
var startupLevel = 12;
var lonLat = new OpenLayers.LonLat(startupLon,startupLat).transform(new
OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
//Define Hidden MapPanl for use with GeoExt
var mapPanel = new GeoExt.MapPanel({
renderTo: '',
height: 0,
width: 0,
map: map,
title: 'A Simple GeoExt Map'
//bbar: []
});
var panel_Themes = new Ext.Panel({
collapsed: false,
html: 'This panel is not collapsed!'
});
var panel_Legend = new Ext.Panel({
title:'<center>Legend</center>',
collapsed: false,
html: 'This panel is not collapsed!'
});
var panel_Overview = new Ext.Panel({
title:'<center>Overview Map</center>',
collapsible: true,
collapsed: false,
applyTo:'overview',
contentEl: 'overview',
height: 200
});
var viewPort1 = new Ext.Viewport({
layout: "border",
items: [{
region: "center",
id: "mappanel",
xtype: "gx_mappanel",
center: lonLat,
zoom: startupLevel,
map: map,
split: true
}, {
region: "east",
contentEl: "legend",
width: 50,
split: true,
collapsible: true,
collapseMode: 'mini'
}, {
region: "west",
title: "<center>Themes</center>",
contentEl: "themes",
width: 225,
split: true,
collapsible: true,
collapseMode: 'mini',
items: [panel_Themes, panel_Legend, panel_Overview]
}]
}); // End ext.OnReady
} // end of init function
</script>
<body onload="init();">
<div id="themes">
</div>
<div id="legend">
</div>
<div id="tools">
</div>
<div id="overview"></div>
</body>
</html>
_______________________________________________
Users mailing list
[email protected]
http://www.geoext.org/cgi-bin/mailman/listinfo/users
