Make it so getMousePosition does not report incorrect position when borders are used in containing elements, by replacing the pagePosition method with a new one and attaching map events to the internal viewport div instead of the user provided map div. r=erilem,tschaub (closes #2247)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@10871 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2010-11-05 12:44:38 +00:00
parent e40bb1f10d
commit a59266325b
6 changed files with 261 additions and 38 deletions
@@ -0,0 +1,103 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>Page Position Test</title>
+        
+        <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
+        <link rel="stylesheet" href="../../examples/style.css" type="text/css" />
+        <style type="text/css">
+            #mapwrap {
+                border: 10px solid red;
+                width: 532px;
+                height: 276px;
+            }
+            #map {
+                position: absolute;
+                border: 10px solid #ccc;
+                width: 512px;
+                height: 256px;
+            }
+            #controlToggle li {
+                list-style: none;
+            }
+            p {
+                width: 512px;
+            }
+            #scrollspace {
+                height: 500px;
+            }
+        </style>
+        <script src="../../lib/OpenLayers.js"></script>
+        <script type="text/javascript">
+            var map, drawControls;
+            function init(){
+                map = new OpenLayers.Map('map');
+
+                var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+                    "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
+
+                var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
+
+                map.addLayers([wmsLayer, lineLayer]);
+                map.addControl(new OpenLayers.Control.LayerSwitcher());
+                map.addControl(new OpenLayers.Control.MousePosition());
+
+                drawControl = new OpenLayers.Control.DrawFeature(lineLayer,
+                                OpenLayers.Handler.Path);
+
+                map.addControl(drawControl);
+
+                map.setCenter(new OpenLayers.LonLat(0, 0), 3);
+
+                document.getElementById('noneToggle').checked = true;
+            }
+
+            function toggleControl(element) {
+                var control = drawControl;
+                if(element.value == "draw" && element.checked) {
+                    control.activate();
+                } else {
+                    control.deactivate();
+                }
+            }
+        </script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">OpenLayers Page Position Test</h1>
+
+        <p id="shortdesc">
+            Test if borders and scroll position cause unwanted offsets on the
+            mouse positions reported by map events.
+        </p>
+        <div id="mapwrap">
+            <div id="map"></div>
+        </div>
+
+        <ul id="controlToggle">
+            <li>
+                <input type="radio" name="type" value="none" id="noneToggle"
+                       onclick="toggleControl(this);" checked="checked" />
+                <label for="noneToggle">navigate</label>
+            </li>
+            <li>
+                <input type="radio" name="type" value="draw" id="lineToggle" onclick="toggleControl(this);" />
+                <label for="lineToggle">draw line</label>
+            </li>
+        </ul>
+
+        <div id="docs">
+            <p>This map's div has a border and absolute positioning, wrapped
+                by a container which also has a border. The page is also
+                scrollable. Neither the borders nor scrolling the page should
+                result in unwanted offsets on pixel positions reported by map
+                events.</p>
+            <p>With the line drawing control active, click on the map to add a
+                point.  The point should be drawn at the exact mouse location.</p>
+            <p>With the navigation control active, shift-drag a zoom rectangle.
+                The rectangle's corner should align exactly with the mouse
+                cursor.</p>
+            <p>Scroll the page and repeat the above tests.</p>
+            <div id="scrollspace"><div>
+        </div>
+    </body>
+</html>