[OpenLayers-Users] Custom Toolbar outside Map

Fri Jun 14 12:31:32 PDT 2013

Hello again,

sorry for asking so many Questions.

I'm trying to create a custom toolbar which should be displayed outside the
map.

I use the following code. This results in the map and the headline are
displayed but not the panel:

<html>

<head>

                <title>OpenLayers Example</title>

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

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

                <style type="text/css">

        .olControlPanel div { 

          display:block;

          width:  34px;

          height: 34px;

          margin: 5px;

          background-color:white;

        }

        .olControlPanel .olControlZoomBoxItemInactive { 

          width:  32px;  

          height: 32px;

          background-image: url("Bilder/ZoomIn.png");

        }

        .olControlPanel .olControlZoomBoxItemActive { 

          width:  32px;  

          height: 32px;

          background-image: url("Bilder/ZoomIn.png");

        }

               </style>

                <script type="text/javascript"
src="OpenLayers/lib/OpenLayers.js"></script>

                <script type="text/javascript">

                function init() {

                               var map = new OpenLayers.Map('map', {

                               projection: new
OpenLayers.Projection("EPSG:31468"),

                               maxExtent: new
OpenLayers.Bounds(4584589,5351093,4609391,5362234),

                               controls:[]

                });

                               var ortho = new OpenLayers.Layer.WMS( "DOP
200",

"http://geodaten.bayern.de/ogc/ogc_dop200_oa.cgi",

                                               {Layers: "adv_dop200c",

                                               isBaseLayer: true}

                                               );

                               map.addLayers([ortho]);

                               var zoomFenster = new
OpenLayers.Control.ZoomBox(

                                               {title: "Auf Fenster
zoomen"});

                               var panel = new
OpenLayers.Control.Panel({div: OpenLayers.Util.getElement('paneldiv')});

                               panel.addControls([zoomFenster]);

                               map.addControl(panel);

                               map.zoomToMaxExtent();

                }

    </script>

</head>

<body onload="init();">

                <h1>idomeoWebMap</h1>

                <div style "width:100%" id="paneldiv"></div>

                <div style="width:100%; height:100%" id="map"></div>

</body>

</html>

Thanks and regards

Helmut

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20130614/a9ff7276/attachment.html>