Screen co ordinates to latitude and longitude

Answer 1

The function calculates a latitude and longitude for the specified point based on the current resolution of the map, and the latitude and longitude of the centre point of the current map, and the distance that the chosen point is from the centre of the map.

var center = this.getCenter();
//map center lat/lon
var res  = this.getResolution(); 
//pre defined by the user. Represents the change in lat long ...
var size = this.getSize(); 

The above bit of code gathers the information needed for the calculation: The centre point of the current map view (which will give us the lat/lon on the centre point), the current map resolution, and the current map size on the users screen (which may be effected by screen size, etc).

Then the calculation goes like this:

    //this is the width and height of the div in which the map has to be displayed
    var delta_x = point.x - (size.w / 2);
    var delta_y = point.y - (size.h / 2);

First take the x co-ord (in pixels) and subtract the width of the map (in pixels). This gives us a new x co-ord in which 0 is the centre pixel of the map. delta-x should now be a pixel value ranging from -(size.w/2) to +(size.w/2). Then we do the same for y co-ord. So delta-x and delta-y are now cartesian co-ordinates with the origin at the centre of the map.

    return new OpenLayers.LatLon(
        center.lat - delta_y * res,
        center.lon + delta_x * res );

We need to convert delta-x and delta-y from pixels to lat/lon. First we multiply delta-x and delta-y by the current resolution. This gives us the correct scale but not the correct origin. Adding centre.lat and centre.lon adusts to give us the lat/lon based on the currently displayed map.

Finally the 'new OpenLayers.LatLon' call just wraps the above calculations in a LatLon object, so that it can be returned from the function as a LatLon object.

edit: when working with pixels, an increase in x co-ord normally means 'move right', and an increase in y co-ord normally means 'move up'. On a map, when you increase Longitude, you usually 'move right'. However Latitude is upside down; when you increase Latitude, you normally 'move down' on a map.

Hence Latitude works in the opposite direction to the normal y co-ord scheme on a screen. Hence in the final calculation a minus is used for centre.lat but a plus for centre.lon.

Answer 2

I rearranged the existing comments, added some more and added some white space. Hopefully, you'll find this clearer.

getLatLonFromPoint: function (point) {
    // point is the x and y screen coordinate

    // map center lat/lon
    var center = this.getCenter();

    // pre defined by the user. Represents the change in lat long per screen unit at the given zoom level
    var res  = this.getResolution(); 

    // this is the width and height of the screen (div) in which the map has to be displayed
    var size = this.getSize(); 

    // this is the distance of the point from the center of the screen (div)
    var delta_x = point.x - (size.w / 2);
    var delta_y = point.y - (size.h / 2);

    // return the latitude and longitude
    //   these are calculated from the center lat/lon using the 
    //   screen distances which are scaled (multiplied) by the resolution
    return new OpenLayers.LatLon(
        center.lat - delta_y * res,
        center.lon + delta_x * res );
   }

Answer 3

can any if you guys also show reverse of this process, how to get screen cordinates againt map coordinates, There are times when you have data in GML format and you have to draw it on screen