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
> [email protected]
> http://openlayers.org/mailman/listinfo/users
--
Christopher Schmidt
MetaCarta
_______________________________________________
Users mailing list
[email protected]
http://openlayers.org/mailman/listinfo/users
