[OpenLayers-Users] Control.Panel outside Map Div

Fri Oct 5 10:52:28 EDT 2007

Thank you very much, for the advise and the example.
It works exellent.

2007/10/4, Tim Schaub <tschaub at openplans.org>:
>
> 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!
>
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20071005/1ba203f3/attachment.html