[OpenLayers-Users] Mouse Offset in Nested Divs
Christopher Schmidt
crschmidt at metacarta.com
Thu Sep 3 15:56:23 EDT 2009
On Thu, Sep 03, 2009 at 01:53:19PM -0600, Scott Lewis wrote:
> Chris,
>
> Thanks for the info and link to the ticket. I tried removing the
> position:relative from #topbox (and the padding) and I'm still getting
> the same issue.
>
> One thing I did discover is if I remove the margin and padding from
> body, and the padding from #topbox, the only offset I have is the border
> width. So I'm not sure if it's the position:relative; (in fact, the
> only reason I have #topbox as position:relative is to let it serve as an
> absolute reference point for mapdiv).
>
> I'll continue to watch the ticket though. Your comments definitely
> pointed me in the right direction, and it's good to know there's
> something to address the general issue.
There are no current plans to extend work on this by any members of the
OpenLayers development team, so far as I'm away; you're probably going
to need to look for a change or workaround in your page if you need a
solution in the short term.
Good Luck,
Chris
> Scott
>
> Christopher Schmidt wrote:
> > 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
More information about the Users
mailing list