fix for #60

conversions to/from lonlat/px need to take into account
the offset of the layersContainerDiv. 


I have introduced the following functions for converting
between layer and screen pixel values:

getLayerPxFromScreenPx() and getScreenPxFromLayerPx()

they are pretty self-explanitory.


I then renamed:

getPixelFromLonLat() and getLonLatFromPixel()

to:

getScreenPxFromLonLat() and getLonLatFroScreenmPx()

and added:

getLayerPxFromLonLat() and getLonLatFromLayerPx()


updates were made throughout the code, demos, and tests
so everything should still run smoothly.

-e-

git-svn-id: http://svn.openlayers.org/trunk/openlayers@329 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

examples/markerss.html

@@ -8,7 +8,7 @@
             border: 1px solid black;
         }
     </style>
-    <script src="lib/OpenLayers.js"></script>
+    <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         <!--
         var map, layer, popup;
@@ -21,6 +21,15 @@
                 "http://octo.metacarta.com/cgi-bin/mapserv",
                 {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'} );
                 
+
+            map.addLayer(
+            new OpenLayers.Layer.WMS("NASA Mosaic", 
+                         "http://wms.jpl.nasa.gov/wms.cgi",
+                         {"EXCEPTIONS" : "application/vnd.ogc.se_inimage",
+                          "format" : "image/jpeg",
+                          layers:"modis,global_mosaic"}
+                         ));
+
             map.addLayer(layer);
 
             markers = new OpenLayers.Layer.Markers( "Markers" );
@@ -31,13 +40,17 @@
         }
         
         function changer() {
-    
+            var lon = map.getLonLatFromLayerPx(new OpenLayers.Pixel(0,0)).lon;
-
+            var lat = map.getLonLatFromLayerPx(new OpenLayers.Pixel(0,0)).lat;
+            var slon = map.getLonLatFromScreenPx(new OpenLayers.Pixel(0,0)).lon;
+            var slat = map.getLonLatFromScreenPx(new OpenLayers.Pixel(0,0)).lat;
+            alert("lon=" + lon + " lat=" + lat 
+                  + "slon=" + slon + " slat=" + slat);
         }
 
         function add() {
             var icon = new OpenLayers.Icon('http://boston.openguides.org/markers/AQUA.png',new OpenLayers.Size(10,17));
-            marker = new OpenLayers.Marker(new OpenLayers.LonLat(180,90), icon);
+            marker = new OpenLayers.Marker(new OpenLayers.LonLat(0,00), icon);
             markers.addMarker(marker);
             
         }        
@@ -58,7 +71,7 @@
     <h1>OpenLayers Example</h1>
     <div id="map"></div>
     <div style="background-color:purple" onclick="add()"> click to add popup to map</div>
-    <div style="background-color:blue" onclick="changer()"> click to modify popup's attributes</div>
+    <div style="background-color:blue" onclick="changer()"> click to get lon/lat for pixel point(0,0)</div>
     <div style="background-color:red" onclick="destroy()"> click to destroy the popup</div>
     <div style="background-color:green" onclick="remove()"> click to remove the popup from map</div>
   </body>

lib/OpenLayers/Control/MouseDefaults.js

@@ -19,7 +19,7 @@ OpenLayers.Control.MouseDefaults.prototype =
     * @param {Event} evt
     */
     defaultDblClick: function (evt) {
-        var newCenter = this.map.getLonLatFromPixel( evt.xy ); 
+        var newCenter = this.map.getLonLatFromScreenPx( evt.xy ); 
         this.map.setCenter(newCenter, this.map.zoom + 1);
     },
 
@@ -68,7 +68,7 @@ OpenLayers.Control.MouseDefaults.prototype =
                 var size = this.map.getSize();
                 var newXY = new OpenLayers.Pixel(size.w / 2 + deltaX,
                                                  size.h / 2 + deltaY);
-                var newCenter = this.map.getLonLatFromPixel( newXY ); 
+                var newCenter = this.map.getLonLatFromScreenPx( newXY ); 
                 this.map.setCenter(newCenter);
                 this.mouseDragStart = evt.xy.copyOf();
             }
@@ -80,8 +80,8 @@ OpenLayers.Control.MouseDefaults.prototype =
     */
     defaultMouseUp: function (evt) {
         if (this.zoomBox) {
-            var start = this.map.getLonLatFromPixel( this.mouseDragStart ); 
+            var start = this.map.getLonLatFromScreenPx( this.mouseDragStart ); 
-            var end = this.map.getLonLatFromPixel( evt.xy );
+            var end = this.map.getLonLatFromScreenPx( evt.xy );
             var top = Math.max(start.lat, end.lat);
             var bottom = Math.min(start.lat, end.lat);
             var left = Math.min(start.lon, end.lon);

lib/OpenLayers/Layer/Markers.js

@@ -58,7 +58,7 @@ OpenLayers.Layer.Markers.prototype =
     * @param {OpenLayers.Marker} marker
     */
     drawMarker: function(marker) {
-        var px = this.map.getPixelFromLonLat(marker.lonlat);
+        var px = this.map.getLayerPxFromLonLat(marker.lonlat);
         var markerImg = marker.draw(px);
         if (!marker.drawn) {
             this.div.appendChild(markerImg);

lib/OpenLayers/Map.js

@@ -171,7 +171,7 @@ OpenLayers.Map.prototype = {
     */
     addPopup: function(popup) {
         this.popups.push(popup);
-        var px = this.getPixelFromLonLat(popup.lonlat)
+        var px = this.getLayerPxFromLonLat(popup.lonlat)
         var popupDiv = popup.draw(px);
         if (popupDiv) {
             popupDiv.style.zIndex = this.Z_INDEX_BASE['Popup'] +
@@ -274,22 +274,81 @@ OpenLayers.Map.prototype = {
     },
     
     /**
-    * @param {OpenLayers.Pixel} point
+     * @param {OpenLayers.Pixel} layerPx
+     * 
+     * @returns px translated into screen pixel coordinates
+     * @type OpenLayers.Pixel
+     */
+    getScreenPxFromLayerPx:function(layerPx) {
+        var screenPx = layerPx.copyOf();
+
+        screenPx.x += parseInt(this.layerContainerDiv.style.left);
+        screenPx.y += parseInt(this.layerContainerDiv.style.top);
+
+        return screenPx;
+    },
+    
+    /**
+     * @param {OpenLayers.Pixel} screenPx
+     * 
+     * @returns px translated into screen pixel coordinates
+     * @type OpenLayers.Pixel
+     */
+    getLayerPxFromScreenPx:function(screenPx) {
+        var layerPx = screenPx.copyOf();
+
+        layerPx.x -= parseInt(this.layerContainerDiv.style.left);
+        layerPx.y -= parseInt(this.layerContainerDiv.style.top);
+
+        return layerPx;
+    },
+
+
+    /**
+    * @param {OpenLayers.Pixel} px
     *
     * @return {OpenLayers.LonLat} 
     */
-    getLonLatFromPixel: function (point) {
+    getLonLatFromLayerPx: function (px) {
+       //adjust for displacement of layerContainerDiv
+       px = this.getScreenPxFromLayerPx(px);
+       return this.getLonLatFromScreenPx(px);         
+    },
+    
+    /**
+    * @param {OpenLayers.Pixel} screenPx
+    *
+    * @returns An OpenLayers.LonLat which is the passed-in screen 
+    *          OpenLayers.Pixel, translated into lon/lat given the 
+    *          current extent and resolution
+    * @type OpenLayers.LonLat
+    */
+    getLonLatFromScreenPx: function (screenPx) {
         var center = this.getCenter();        //map center lon/lat
         var res  = this.getResolution();
         var size = this.getSize();
     
-        var delta_x = point.x - (size.w / 2);
+        var delta_x = screenPx.x - (size.w / 2);
-        var delta_y = point.y - (size.h / 2);
+        var delta_y = screenPx.y - (size.h / 2);
         
         return new OpenLayers.LonLat(center.lon + delta_x * res ,
                                      center.lat - delta_y * res); 
     },
 
+    /**
+    * @param {OpenLayers.LonLat} lonlat
+    *
+    * @returns An OpenLayers.Pixel which is the passed-in OpenLayers.LonLat, 
+    *          translated into layer pixels given the current extent 
+    *          and resolution
+    * @type OpenLayers.Pixel
+    */
+    getLayerPxFromLonLat: function (lonlat) {
+       //adjust for displacement of layerContainerDiv
+       var px = this.getScreenPxFromLonLat(lonlat);
+       return this.getLayerPxFromScreenPx(px);         
+    },
+
     /**
     * @param {OpenLayers.LonLat} lonlat
     *
@@ -298,7 +357,7 @@ OpenLayers.Map.prototype = {
     *          and resolution
     * @type OpenLayers.Pixel
     */
-    getPixelFromLonLat: function (lonlat) {
+    getScreenPxFromLonLat: function (lonlat) {
         var resolution = this.getResolution();
         var extent = this.getExtent();
         return new OpenLayers.Pixel(
@@ -336,7 +395,7 @@ OpenLayers.Map.prototype = {
             //redraw popups
             for (var i = 0; i < this.popups.length; i++) {
                 var popup = this.popups[i];
-                var px = this.getPixelFromLonLat(popup.lonlat);
+                var px = this.getLayerPxFromLonLat(popup.lonlat);
                 popup.moveTo(px);
             }
 

tests/test_Map.html

@@ -125,11 +125,11 @@
         map.setCenter(new OpenLayers.LonLat(0, 0), 0);
  
         var pixel = new OpenLayers.Pixel(50,150);
-        var lonlat = map.getLonLatFromPixel(pixel);
+        var lonlat = map.getLonLatFromScreenPx(pixel);
-        t.ok( lonlat instanceof OpenLayers.LonLat, "getLonLatFromPixel returns valid OpenLayers.LonLat" );
+        t.ok( lonlat instanceof OpenLayers.LonLat, "getLonLatFromScreenPx returns valid OpenLayers.LonLat" );
 
-        var newPixel = map.getPixelFromLonLat(lonlat);
+        var newPixel = map.getScreenPxFromLonLat(lonlat);
-        t.ok( newPixel instanceof OpenLayers.Pixel, "getPixelFromLonLat returns valid OpenLayers.Pixel" );
+        t.ok( newPixel instanceof OpenLayers.Pixel, "getScreenPxFromLonLat returns valid OpenLayers.Pixel" );
 
         // WARNING!!!  I'm faily sure that the following test's validity 
         //             depends highly on rounding and the resolution. For now,