[Users] Rendering Overviewmap in Ext.Panel using viewport

Tue Sep 28 16:44:29 CEST 2010

Thank you very much, I managed to recreate the example link you provided and finally got the overview to show up! Appreciate everyone's assistance greatly. Here is my final code that is working - 

 function addOverview() {
                var mapOptions = {
                    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"),
                    units: "m"
                };
                var controlOptions = {
                    size: new OpenLayers.Size(150, 100),
                    div: Ext.get('overviewmap'),
                    mapOptions: mapOptions,
                    /* destroy issues in IE to be fixed, workaround for now */
                    destroy: function() {},
                    layers: [layer_Overview]
                };
                var overview = new OpenLayers.Control.OverviewMap(controlOptions);
                map.addControl(overview);
            };

 var viewPort1 = new Ext.Viewport({
        layout: "border",
        items: [{
            region: "center",
            id: "mappanel",
            xtype: "gx_mappanel",
            center: lonLat,
            zoom: startupLevel,
            map: map,
            split: true
        },{
            region: "west",
            xtype: 'panel',
            title: "<center>Themes2</center>",
            contentEl: "themes",
            width: 225,
            split: true,
            collapsible: true,
            collapseMode: 'mini',
            listeners: {'afterlayout': {fn: addOverview, single: true}},
            items: [{xtype: 'panel', height: 150, title: 'Overview Map', html: '<div id="overviewmap" style="width:100%;height:100%;"></div>', region: 'south'}] 
        }]
});

-----Original Message-----
From: Bart van den Eijnden (OSGIS) [mailto:bartvde at osgis.nl] 
Sent: September 28, 2010 8:15 AM
To: Andrew Stewart
Cc: users at geoext.org
Subject: Re: [Users] Rendering Overviewmap in Ext.Panel using viewport

An alternative solution is described here:

http://www.geoext.org/pipermail/users/2010-February/000585.html

Best regards,
Bart

>    Hi, thanks for your suggestion. I am not sure if I have this correctly
> since I have never used a BoxComponent before. Unfortunately I tried
> the below code and my overview map doesn't seem to show up anywhere,
> any idea what could be wrong? Appreciate the assistance.
>
>  //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 overviewBox = Ext.extend(Ext.BoxComponent, {
>         map: map,
>         afterRender: function() {
>         var redgisOverview = new OpenLayers.Control.OverviewMap({
>             div: this.getEl(overview).dom,
>             mapOptions: options
>             //div: container_overview
>         });
>         this.map.addControl(redgisOverview);
>         redgisOverview.superclass.afterRender.apply(this, arguments);
>         }
>         });
>
>
> <body onload="init();">
>         <div id="themes">test
>         </div>
>          <div id="legend">
>         </div>
>         <div id="tools">
>         </div>
>         <div id="overview"></div>
>     </body>
>
>
>
> -----Original Message-----
> From: Eric Lemoine [mailto:eric.lemoine at camptocamp.com]
> Sent: September 28, 2010 1:33 AM
> To: Andrew Stewart
> Cc: users at geoext.org
> Subject: Re: [Users] Rendering Overviewmap in Ext.Panel using viewport
>
> On Mon, Sep 27, 2010 at 11:21 PM, Andrew Stewart
> <Andrew.Stewart at reddeer.ca> wrote:
>> 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!
>
> Here's what we've used for wrapping a MousePosition in a BoxComponent:
>
> MousePositionBox = Ext.extend(Ext.BoxComponent, {
>     map: null,
>     afterRender: function() {
>         var control = new OpenLayers.Control.MousePosition({
>             div: this.getEl().dom,
>             numDigits: 0,
>             prefix: "Coordinates (m):"
>         });
>         this.map.addControl(control);
>         MousePositionBox.superclass.afterRender.apply(this, arguments);
>     }
> });
>
> Applying this to the OverviewMap might just work.
>
> Cheers,
>
> --
> Eric Lemoine
>
> Camptocamp France SAS
> Savoie Technolac, BP 352
> 73377 Le Bourget du Lac, Cedex
>
> Tel : 00 33 4 79 44 44 96
> Mail : eric.lemoine at camptocamp.com
> http://www.camptocamp.com
>
>
> [This message has been scanned for security content threats and viruses.]
>
> [The City of Red Deer I.T. Services asks that you please consider the
> environment before printing this e-mail.]
>
>
>
>
> _______________________________________________
> Users mailing list
> Users at geoext.org
> http://www.geoext.org/cgi-bin/mailman/listinfo/users
>

[This message has been scanned for security content threats and viruses.]

[The City of Red Deer I.T. Services asks that you please consider the environment before printing this e-mail.]