[OpenLayers-Users] PanZoomBar and ControlPanel are overlying in map

Sat Feb 7 04:37:58 EST 2009

Hi,
i'm trying to create a map. I want to use PanZoomBar and ControlPanel, but
in the default-position, they are overlying at the left top corner. I now
tried to either lower the ZoomBar or to set the Control panel more right,
but i don't find any documentation or examples for that issue. My settings
are looking like this:
        <style type="text/css">
        .olControlPanel div { 
          display:block;
		  top: 0px;
          width:  24px;
          height: 80px;
          margin: 5px;
		  float:left;
          background-color:red;
        }        
        .olControlPanel .olControlMouseDefaultsItemActive {
          width:  32px;  
          height: 32px;		
          background-color: blue;
          background-image: url("./css/img/pan_on.png");
        }
        .olControlPanel .olControlMouseDefaultsItemInactive {
          width:  32px;  
          height: 32px;		
          background-color: orange;
          background-image: url("./css/img/pan_off.png");
        }
        .olControlPanel .olControlZoomBoxItemInactive { 
          width:  32px;  
          height: 32px;
          background-color: orange;
          background-image: url("./css/img/zoom_off.png");
        }
        .olControlPanel .olControlZoomBoxItemActive { 
          width:  32px;  
          height: 32px;
          background-color: blue;
          background-image: url("./css/img/zoom_on.png");
        }
        .olControlPanel .olControlZoomToMaxExtentItemInactive { 
          width:  32px;  
          height: 32px;
          background-image: url("./css/img/globe_off.png");
        }
        .olControlPanel .olControlZoomToMaxExtentItemActive { 
          width:  32px;  
          height: 32px;
          background-image: url("./css/img/globe_on.png");
        }
		#map {
          width: 800px;
          height: 500px;
          border: 5px;
		  border-style: groove;
		  border-color:#aaaaaa
		}
        #wrapper {
          width: 800px;
        }
        #location {
          float: right;
        }
		#scale	{
		  float: left;
		}
        </style>

		
        <script
src="http://openlayers.org/dev/lib/Firebug/firebug.js"></script>
        <script src="http://openlayers.org/api/OpenLayers.js"
type="text/javascript"></script>		
        <script defer="defer" type="text/javascript">

< --------------------------------------
8<----------------------------------------------- >

            zb = new OpenLayers.Control.ZoomBox(
                {title:"Zoom box: Selecting it you can zoom on an area by
clicking and dragging."});
            var panel = new OpenLayers.Control.Panel({defaultControl: zb});
            panel.addControls([
                new OpenLayers.Control.MouseDefaults(
                    {title:'You can use the default mouse configuration'}), 
                zb,                
                new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to the
max extent"}) 
            ]);			
			
            //map.addControl(new OpenLayers.Control.PanZoomBar());            
            map.addControl(new OpenLayers.Control.Scale($('scale')));
            map.addControl(new OpenLayers.Control.MousePosition({element:
$('location')}));
            map.addControl(new OpenLayers.Control.LayerSwitcher());			
            map.addControl(panel);		
			
			//Hier wird auf den Ausschnitt gezoomt
			var lonLat = new OpenLayers.LonLat(3438486,5526658)
			map.setCenter(lonLat, 2);
			map.zoomIn();			
			
        }
        </script>
	
    </head>
    <body onload="init()">
        <div id="map"></div>
        <div id="wrapper">
            <div id="location"></div>
            <div id="scale"></div>
        </div> 
		<div id="panel"></div>		
    </body>
</html>

Maybe anybody could give me a hint
Regards
Albrecht
-- 
View this message in context: http://n2.nabble.com/PanZoomBar-and-ControlPanel-are-overlying-in-map-tp2288646p2288646.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.