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 : &#39;controls&#39;});<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=&quot;<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>&quot;&gt;<br>&nbsp; &lt;head&gt;<br>&nbsp;&nbsp;&nbsp; &lt;style type=&quot;text/css&quot;&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=&quot;/javascripts/openlayers/lib/OpenLayers.js&quot;&gt;&lt;/script&gt;<br><br>&nbsp;&nbsp;&nbsp; &lt;script type=&quot;text/javascript&quot;&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(&#39;map&#39;);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; boundary = new OpenLayers.Layer.WMS.Untiled(&#39;Boundary&#39;, <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &quot;<a href="http://localhost/cgi-bin/yunnanserver?">
http://localhost/cgi-bin/yunnanserver?</a>&quot;, {layers: &quot;Watersheds&quot;,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; transparent: &quot;false&quot;, format:&quot;image/png&quot; } );<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 : &#39;controls&#39;});<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=&quot;init()&quot;&gt;<br>&nbsp;&nbsp;&nbsp; &lt;div id=&quot;controls&quot;&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&nbsp; &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;<br>&nbsp; &lt;/body&gt;
<br>&lt;/html&gt;<br><br><br>