
<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">There is a ticket already:<div><br></div><div><a href="http://trac.geoext.org/ticket/202">http://trac.geoext.org/ticket/202</a></div><div><br></div><div>The way I did it until now is:</div><div><br></div><div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;addOverview: = function() {</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var mapOptions = {</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;maxExtent: new OpenLayers.Bounds(180000, 397000,200000, 414000),</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;maxResolution: 500,</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;projection: "EPSG:28992",</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;units: "m"</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;};</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var controlOptions = {</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;size: new OpenLayers.Size(150, 100),</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;div: Ext.get('overviewmap'),</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;mapOptions: mapOptions,</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/* destroy issues in IE to be fixed, workaround for now */</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;destroy: function() {},</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;layers: [new OpenLayers.Layer.WMS("overview", GisArts.WMSOnlineResource, {map: GisArts.MapFileParameter, layers: 'gemeentegrens,topografie,straatnamen'}, {buffer: 0, ratio: 1, singleTile: true})]</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;};</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var overview = new OpenLayers.Control.OverviewMap(controlOptions);</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;map.addControl(overview);</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;};</div><div><br></div><div>and then:</div><div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;region: 'east',</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;xtype: 'panel',</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;layout: 'border',</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;listeners: {'afterlayout': {fn: addOverview, single: true}},</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;items: [</div></div><div>{xtype: 'panel', height: 150, title: 'Overzichtskaart', html: '&lt;div id="overviewmap" style="width:100%;height:100%;"&gt;&lt;/div&gt;', region: 'south'}</div><div>]</div><div><br></div><div>etc.</div></div><div><br></div><div>Best regards,</div><div>Bart</div><div><br><div><div>On Feb 23, 2010, at 7:06 PM, Matt Priour wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite">

<div id="MailContainerBody" style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-TOP: 15px" leftmargin="0" topmargin="0" canvastabstop="true" name="Compose message area">

<div><font face="Arial" size="2">if you want an overview map in an extjs panel 

separate from the main map panel, I'm fairly certain that you would need to 

instead instantiate a new map panel with the overlay layers and hook up the main 

map pan &amp; zoom events to make appropriate changes to the overview 

map.</font></div>

<div><font face="Arial" size="2"></font>&nbsp;</div>

<div><font face="Arial" size="2">This may be a good idea for a new widget. If others 

are interested in such functionality, I can file a ticket.</font></div>

<div><font face="Arial" size="2"></font>&nbsp;</div>

<div><font face="Arial" size="2">Matt Priour</font></div>

<div style="FONT: 10pt Tahoma">

<div><br></div>

<div style="BACKGROUND: #f5f5f5">

<div style="font-color: black"><b>From:</b> <a title="nik1166@googlemail.com" href="mailto:nik1166@googlemail.com">Nils Krueger</a> </div>

<div><b>Sent:</b> Tuesday, February 23, 2010 11:39 AM</div>

<div><b>To:</b> <a title="users@geoext.org" href="mailto:users@geoext.org">users@geoext.org</a> </div>

<div><b>Subject:</b> [Users] OverviewMap</div></div></div>

<div><br></div>Hello...<br><br>I would like to show the OverviewMap in an own 

suitable panel display.<br>Unfortunately, it doesn’t work. If so, is there any 

example? Or can anybody show me how to do this.<br><br>Thank you for your 

help!<br><br>Nils<br><br>&lt;html&gt;<br>&lt;head&gt;<br>&nbsp;&nbsp;&nbsp; 

&lt;title&gt;OverMap&lt;/title&gt;<br>&nbsp;&nbsp;&nbsp; &lt;!--link 

rel="stylesheet" type="text/css" href="<a href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css">http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css</a>" 

/--&gt;<br>&nbsp;&nbsp;&nbsp; &lt;link rel="stylesheet" type="text/css" 

href="./lib/ext/resources/css/ext-all.css" /&gt;<br>&nbsp;&nbsp;&nbsp; 

<br>&nbsp;&nbsp;&nbsp; &lt;!--script type="text/javascript" src="<a href="http://extjs.cachefly.net/builds/ext-cdn-771.js">http://extjs.cachefly.net/builds/ext-cdn-771.js</a>"&gt;&lt;/script--&gt;&nbsp; 

<br>&nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" 

src="./lib/ext/adapter/ext/ext-base.js"&gt;&lt;/script&gt;<br>&nbsp;&nbsp;&nbsp; 

&lt;script type="text/javascript" 

src="./lib/ext/ext-all.js"&gt;&lt;/script&gt;<br>&nbsp;&nbsp;&nbsp; 

<br>&nbsp;&nbsp;&nbsp; &nbsp;&lt;script src="<a href="http://openlayers.org/api/2.8/OpenLayers.js">http://openlayers.org/api/2.8/OpenLayers.js</a>"&gt;&lt;/script&gt;<br><br>&nbsp;&nbsp;&nbsp; 

<br>&nbsp;&nbsp;&nbsp; &lt;script src="./lib/GeoExt/script/GeoExt.js" 

type="text/javascript"&gt;&lt;/script&gt;<br><br><br>&nbsp;&nbsp;&nbsp; 

&lt;script type="text/javascript"&gt;<br>&nbsp;&nbsp;&nbsp; var panel, 

map;<br>&nbsp;&nbsp;&nbsp; Ext.onReady(function(){<br>&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var options_31467 = 

{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

projection:&nbsp; new 

OpenLayers.Projection("EPSG:31467"),<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

controls: [], 

<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

maxExtent: new OpenLayers.Bounds(3336848, 5208708, 3661609, 

5575555),<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; maxResolution: "auto",<br>&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; numZoomLevels: 

20,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; units: 'm',<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

};<br><br><br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; // create a new 

map<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map = new 

OpenLayers.Map('map', options_31467);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; // create base layer 

<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var KreiseBW = new 

OpenLayers.Layer.WMS(<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

"KreiseBW",<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; "/geoserver/wms",<br>&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

layers: 'topp:KreiseBW',<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

isBaseLayer:true,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

}<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; );<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

// create overview map<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var ovMapLayer = 

new OpenLayers.Layer.WMS(<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; "Kreise", <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; "/geoserver/wms", <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; 

{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

layers: 'topp:BW',<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

}<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; );<br>&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var ovMap = 

{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

mapOptions: 

{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

projection: 

map.getProjection(),<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

maxExtent: 

map.getMaxExtent()<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

},<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layers: 

[ovMapLayer]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

};<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; //add Layers<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

map.addLayer(KreiseBW);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //add Controls<br>&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; map.addControl(new 

OpenLayers.Control.LayerSwitcher());<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

map.addControl(new OpenLayers.Control.Navigation());<br>&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; map.addControl(new 

OpenLayers.Control.PanZoomBar({zoomWorldIcon: 'true'}));<br>&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

//map.addControl(new 

OpenLayers.Control.OverviewMap(ovMap));<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

map.zoomToMaxExtent();<br><br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //create 

layout<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var overmap = new 

Ext.Panel({<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; title: 

'Overmap',<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; // 

???<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; control: new 

OpenLayers.Control.OverviewMap(ovMap),<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; //items: ovmap, <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; height:150<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

});<br><br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var toc = new 

Ext.Panel({<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

title:'TOC',<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; html: 

'&amp;lt;empty panel&amp;gt;',<br>&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cls:'empty'<br>&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; });<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var west = new 

Ext.Panel({<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

region:'west',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

margins:'5 0 5 

5',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

split:true,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

width: 

210,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

layout:'accordion',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

items: [overmap, toc]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

});<br><br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var map_panel = new 

GeoExt.MapPanel({<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

region:'center',<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

map: map,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; });<br>&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var view = new 

Ext.Viewport({<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

layout:'border',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

items:[west, 

map_panel]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

});<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<br>&nbsp;&nbsp;&nbsp; 

&lt;/script&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;<br><div>

<br class="webkit-block-placeholder"></div><hr><div><br class="webkit-block-placeholder"></div>_______________________________________________<br>Users mailing 

list<br><a href="mailto:Users@geoext.org">Users@geoext.org</a><br>http://www.geoext.org/cgi-bin/mailman/listinfo/users<br></div>

_______________________________________________<br>Users mailing list<br><a href="mailto:Users@geoext.org">Users@geoext.org</a><br>http://www.geoext.org/cgi-bin/mailman/listinfo/users<br></blockquote></div><br></div></body></html>