[OpenLayers-Users] Control.Panel outside Map Div

Thu Oct 4 15:31:12 EDT 2007

Hey-

Leandro R wrote:
> Hello!!!
> Is there any chance to put a Panel (a collection of buttons in my case) 
> outside the Map.
> I have tried with the 'div' option, but doesn't work for me.
> Am I doing something wrong?.

A couple things.

Any time you do *anything* that requires a custom layout/style (for me 
this means always), use a separate link tag to point to the OL default 
style.  That is

<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />

This stops the dynamic stylesheet loading that breaks the cascading 
nature of CSS.

Second, if you extend the default styles, you'll need to add a class 
name to your panel element.  That is

<div id="panel" class="olControlPanel"></div>

The alternative is to copy the olControlPanel style into a declaration 
that references your #panel element.

I just put up a quick example that demonstrates this (see [1] and [2]).

Hope that helps,
Tim

[1] 
http://trac.openlayers.org/browser/trunk/openlayers/examples/editingtoolbar-outside.html

or after the svn update occurs

[2] http://openlayers.org/dev/examples/editingtoolbar-outside.html

> Thanks
> Here is the page:
> 
> <style type="text/css">
>         #map {
>            width: 650px;
>            height: 550px;
>            border: 1px solid black;
>         }
>         .olControlPanel div {
>             display: block;
>             float: left;
>             margin: 3px;
>             width: 24px;
>             height: 24px;
>             background-color:red;
>         }...
> 
> <script type="text/javascript">
> var panel = new OpenLayers.Control.Panel({div:$('panel')});
>             panel.addControls([
>                 new OpenLayers.Control.MouseDefaults(), // DragPan + 
> MouseWheel
>                 new OpenLayers.Control.ZoomBox(),
>                 new OpenLayers.Control.ZoomToMaxExtent()
>             ]);
> map.addControl(panel);
> 
> <body onload="init()">
>     <table>
>       <tr>
>         <td style="width:40px" valign="middle" rowspan="3"><div 
> id="panzoombar"></div></td>
>         <td colspan="3" align="right"><div id="panel"></div></td>
>       </tr>
>       <tr>
>         <td colspan="3"><div id="map"></div></td>
>       </tr>
>       <tr>
>         <td align="left" style="font-size:0.8em; 
> font-family:Verdana"><div id="scale"></div></td>
>         <td align="right" style="font-size: 0.8em; 
> font-family:Verdana"><div id="position"></div></td>
>       </tr>
>     </table>
>     <div id="nodelist"></div>
> </body>
> 
> !DSPAM:4033,4703e79c210551804284693!
> 
> 
> ------------------------------------------------------------------------
> 
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
> 
> 
> !DSPAM:4033,4703e79c210551804284693!