[OpenLayers-Users] editingtoolbar position in custom application

Mon Nov 5 04:03:34 EST 2007

Hi,

i tried to implement the editingtoolbar-outside example into my application.
Basically it worked to put the toolbar outside my map but the toolbar is
displayed on the top right of my html page. How/Where can i change that? I
expected that the position is managed by the style section with
.olControlEditingToolbar, but changes there have no effect!

here is my html code for the toolbar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <link rel="stylesheet"
href="/usr/share/openlayers-2.5/theme/default/style.css" type="text/css" />
    <style type="text/css">
		.olControlEditingToolbar  {
            float:left;
            right: 0px;
            height: 30px; 
            width: 150px;
        }
        #map {
            width: 800px;
            height: 500px;
            border: 0px solid black;
			position: absolute;
            top: 40;
            right: 25%;
			<!-- float:center; -->
        }
		#layerswitcher {
            width: 25%;
            height: 60%;
            border: 0px solid black;

        }

    </style>
    <script src="http://172.21.18.45/openlayers/lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
        function init(){
		    var options = { scales: [800000, 600000, 250000, 125000, 75000, 30000,
10000], 
			'projection':'EPSG:31258', 'units':'m', 
			'maxExtent': new OpenLayers.Bounds(390730, 119473, 594760, 238680), 
			'maxResolution': "auto", 
			controls: [new OpenLayers.Control.MouseDefaults()],  
			layers: [l_wms],
			minRatio: 8,
			maxRatio: 128
			};  

			map = new OpenLayers.Map($('map'),options, { controls: [] });

			map.addControl(new OpenLayers.Control.PanZoomBar());
			map.addControl(new OpenLayers.Control.MouseToolbar());
					//map.addControl(new OpenLayers.Control.MousePosition());
					//map.addControl(new OpenLayers.Control.OverviewMap());
			map.addControl(new OpenLayers.Control.Scale());
			map.addControl(new
OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher'),
activeColor:"red"}));
			map.addControl(new OpenLayers.Control.OverviewMap(options));

		//--------------- EditToolbar ---------------
		//	vlayer = new OpenLayers.Layer.Vector( "Custom Layer");
		//	map.addControl(new OpenLayers.Control.EditingToolbar(vlayer));

            vlayer = new OpenLayers.Layer.Vector( "Editable" );

            var container = document.getElementById("panel");
            var panel = new OpenLayers.Control.EditingToolbar(
                vlayer, {div: container}
            );
            map.addControl(panel);

			//END ------- Edit Toolaber --------------

// ------------------------------------------------------------ Layer
---------------------------------------------------------------------//
		//
------------------------------------------------------------------------------------------------
		// ---------------------------------- WMS
-----------------------------------------------------
		//
------------------------------------------------------------------------------------------------
			var g_wms = new .....

			var l_wms = new .....

			var b_wms = new .....

			var lg_wms = new .....

			var l_st_wms = new .....						
	//--------------- Define Layers -------------
			map.addLayers([l_wms, b_wms, g_wms, lg_wms, l_st_wms, vlayer]);
					//map.addControl(new OpenLayers.Control.LayerSwitcher());
//LayerSwitcher Panel
            map.zoomToMaxExtent();
        }
    </script>
  </head>
  <body onload="init()"; style="color: rgb(0, 0, 0); background-color:
rgb(0, 0, 0);">
  <!--  <h1>Orthophotos</h1> -->
    <div id="layerswitcher" style="float:center;"></div>
	<div style="margin-left: 20%;" id="map"; ></div>
	<div id="panel" class="olControlEditingToolbar"></div>
  </body>
</html>

------

I have a simmilar problem with the layerswitcher outside the map, it is also
displayed on the right of my application but the layerswitcher change the
position when I make changes in the style section (but the background of the
layer allways remain on the right side of the html page)
-- 
View this message in context: http://www.nabble.com/editingtoolbar-position-in-custom-application-tf4750311.html#a13583238
Sent from the OpenLayers Users mailing list archive at Nabble.com.