[Users] Rendering Overviewmap in Ext.Panel using viewport

Mon Sep 27 23:21:15 CEST 2010

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>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20100927/d951701b/attachment-0001.htm 