[OpenLayers-Users] Mouse Offset in Nested Divs

Thu Sep 3 14:59:11 EDT 2009

On Thu, Sep 03, 2009 at 12:49:51PM -0600, Scott Lewis wrote:
> I am fairly new at OpenLayers, but am impressed with it's functionality.
>  However, I am having a problem when it comes to nested divs with
> OpenLayers.  I have some code to draw a rectangle on the map when the
> user clicks and drags.  The rectangle draws fine, except it is offset
> from the mouse cursor by a fairly significant amount.
> 
> Here is a skeleton of my HTML structure:
> 
> <body>
> 	<div class="pageContentContainer">
> 		<div id="topBox">
> 			<div id="mapdiv" class="olMap"></div>
> 		</div>
> 	</div>
> </body>
> 
> And some CSS relevant to the page:
> 
> body {
> 	margin: auto;
> 	padding: 10px 0;
> 	top: -11px;
> 	position: relative;
> }
> /* there is a page header at the top.  I didn't write this CSS */
> 
> .pageContentHeader {
> 	clear: both;
> 	margin: 0;
> 	padding: 0;
> 	text-align: left;
> }
> 
> #topBox {
> 	border: thin solid orange;
> 	height: 420px;
> 	padding: 10px;
> 	position: relative;
> 	width: 1230px;
> }

^^ This is the proble. position:relative with a border messes up page
position calculations, I beleive.
Given the amount that this is off, it is completely possible that the
padding is also an issue here.

http://trac.openlayers.org/ticket/2247

I don't know all the intracacies here, but position: relative is probably
chief among the problems.

-- Chris

> #mapdiv {
> 	border: thin solid red;
> 	height: 400px;
> 	position: absolute;
> 	right: 10px;
> 	width: 400px;
> }
> 
> and my setup code:
> 
> function initOpenLayers() {
> 	var mapExtent = new OpenLayers.Bounds(-3000000,-3000000,0,0);
> 	var mapOptions = {
> 			restrictedExtent: mapExtent,
> 			projection: 'EPSG:3408',
> 			maxExtent: mapExtent,
> 			maxResolution: 'auto'
> 	}
> 	olMap = new OpenLayers.Map('mapdiv', mapOptions);
> 	
> 	var wmsLayer = new OpenLayers.Layer.WMS(
> 			'NSIDC WMS',
> 			'http://nsidc.org/cgi-bin/nsidc_ogc_north.pl',
> 			{layers: 'blue_marble_07,north_pole_geographic'}
> 	);
> 	
> 	var selectionLayer = new OpenLayers.Layer.Vector('Box Drawing Layer');
> 	
> 	olMap.addLayers([wmsLayer, selectionLayer]);
> 	
> 	var selBoxControl = new OpenLayers.Control();
> 	OpenLayers.Util.extend(selBoxControl, {
> 		draw: function() {
> 			selectionHandler = new OpenLayers.Handler.RegularPolygon(
> 					selBoxControl,
> 					{'done': doneSelect},
> 					{sides:4, irregular: true, persist: true}
> 			);
> 			
> 			selectionHandler.activate();
> 		}
> 	});
> 	
> 	olMap.addControl(selBoxControl);
> 	
> 	olMap.setCenter(mapExtent, 0);
> 	olMap.updateSize();
> }
> 
> 
> 
> When drawing, the cursor is about 10 pixels below and 30 or 40 pixels to
> the left of the corner that is being dragged.
> 
> 
> Does anyone know of any methods to counteract the offsets here?
> 
> 
> Thanks!
> 
> Scott Lewis
> NSIDC
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users

-- 
Christopher Schmidt
MetaCarta