[OpenLayers-Users] Mouse Offset in Nested Divs

Thu Sep 3 14:49:51 EDT 2009

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;
}

#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