<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.5730.11" name=GENERATOR></HEAD>
<BODY>
<DIV dir=ltr align=left><FONT face="Trebuchet MS" size=2><SPAN 
class=243401420-17012007>In case anybody else is searching for the syntax to add 
the Overview Map control outside of the viewport, see</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT face="Trebuchet MS" size=2><SPAN 
class=243401420-17012007><A 
href="http://trac.openlayers.org/wiki/Control/OverviewMap#Customlayout">http://trac.openlayers.org/wiki/Control/OverviewMap#Customlayout</A></SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT face="Trebuchet MS" size=2><SPAN 
class=243401420-17012007></SPAN></FONT>&nbsp;</DIV>
<DIV dir=ltr align=left><FONT face="Trebuchet MS" size=2><SPAN 
class=243401420-17012007>Tim</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT face="Trebuchet MS" size=2><SPAN 
class=243401420-17012007></SPAN></FONT>&nbsp;</DIV><FONT face="Trebuchet MS" 
size=2></FONT><BR>
<BLOCKQUOTE 
style="PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #000000 2px solid; MARGIN-RIGHT: 0px">
  <DIV class=OutlookMessageHeader lang=en-us dir=ltr align=left>
  <HR tabIndex=-1>
  <FONT face=Tahoma size=2><B>From:</B> dev-bounces@openlayers.org 
  [mailto:dev-bounces@openlayers.org] <B>On Behalf Of </B>Ludwig Max 
  Brinckmann<BR><B>Sent:</B> Wednesday, January 17, 2007 3:05 AM<BR><B>To:</B> 
  dev@openlayers.org<BR><B>Subject:</B> [OpenLayers-Dev] Control outside map (re 
  #445)<BR></FONT><BR></DIV>
  <DIV></DIV>Ticket #445 promises a way of easily putting controls outside the 
  main map -- a great help if there is more than just very simple mouse 
  interaction since that seems to confuse many browsers.<BR><BR>The way I 
  understand it, to utilise this one, I have to pass in the id of the div where 
  the control is supposed to be located when creating the control, such as 
  <BR><BR>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; overview = new 
  OpenLayers.Control.OverviewMap({div : 'controls'});<BR>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; map.addControl(overview);<BR><BR>However, when running this 
  it gives me the following exception:<BR><BR>
  <DIV style="MARGIN-LEFT: 40px">Error: this.div.appendChild is not a 
  function<BR>Source File: <A 
  href="http://localhost/javascripts/openlayers/lib/OpenLayers/Control/OverviewMap.js">http://localhost/javascripts/openlayers/lib/OpenLayers/Control/OverviewMap.js 
  </A><BR>Line: 117<BR></DIV><BR>Is there a working example (with current svn 
  head) someone could point me to? I am actually not that keen on this 
  particular control, I am looking for a working starting point for my own 
  control, so any control would do. <BR><BR>Ludwig<BR><BR>The full 
  script:<BR>&lt;html xmlns="<A 
  href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</A>"&gt;<BR>&nbsp; 
  &lt;head&gt;<BR>&nbsp;&nbsp;&nbsp; &lt;style 
  type="text/css"&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #map { 
  <BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 
  80%;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  height: 100%;<BR>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; top: 
  0;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left: 
  0;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  position: absolute;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  }<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #controls 
  {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 
  20%;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  position: absolute; 
  <BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; top: 
  0;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  right: 
  0;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  height: 100%;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  }<BR>&nbsp;&nbsp;&nbsp; &lt;/style&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;script 
  src="/javascripts/openlayers/lib/OpenLayers.js"&gt;&lt;/script&gt;<BR><BR>&nbsp;&nbsp;&nbsp; 
  &lt;script type="text/javascript"&gt; 
  <BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  &lt;!--<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function 
  init(){<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  var map = new OpenLayers.Map('map');<BR>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  boundary = new OpenLayers.Layer.WMS.Untiled('Boundary', <BR>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; "<A href="http://localhost/cgi-bin/yunnanserver?"> 
  http://localhost/cgi-bin/yunnanserver?</A>", {layers: 
  "Watersheds",<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  transparent: "false", format:"image/png" } );<BR>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; 
  boundary.setVisibility(true);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  map.addLayers ([boundary]);<BR>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; overview 
  = new OpenLayers.Control.OverviewMap({div : 
  'controls'});<BR>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
  map.addControl(overview);<BR>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; bounds = 
  new OpenLayers.Bounds(-180,-90,180,90);<BR>&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp; map.zoomToExtent 
  (bounds);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  }<BR>&nbsp;&nbsp;&nbsp; &lt;/script&gt;<BR>&nbsp; &lt;/head&gt;<BR>&nbsp; 
  &lt;body onload="init()"&gt;<BR>&nbsp;&nbsp;&nbsp; &lt;div 
  id="controls"&gt;&lt;/div&gt;<BR>&nbsp;&nbsp;&nbsp; &lt;div 
  id="map"&gt;&lt;/div&gt;<BR>&nbsp; &lt;/body&gt; 
<BR>&lt;/html&gt;<BR><BR><BR></BLOCKQUOTE></BODY></HTML>