How to convert a vector (X,Y) position to a latitude/longitude coordinate? Javascript

Question

I have seen many posts similar here on SO, but none have helped me so far. I am doing this in Javascript. I need to convert a position that is taken on the screen, using Leap Motion software, in the form of a vector (X,Y,Z), and convert it to a google maps position which is in the form of a coordinate (latitude, longitude). I am trying to calculate the distance between the leap motion gesture (think of this as the cursor on the screen) and the markers being displayed on the google maps api. Currently my formula is:

function convertToLatLng(x, y){
    // retrieve the lat lng for the far extremities of the (visible) map
    var latLngBounds = map.getBounds();
    var neBound = latLngBounds.getNorthEast();
    var swBound = latLngBounds.getSouthWest();

    // convert the bounds in pixels
    var neBoundInPx = map.getProjection().fromLatLngToPoint(neBound);
    var swBoundInPx = map.getProjection().fromLatLngToPoint(swBound);

    // compute the percent of x and y coordinates related to the div containing the map; in my case the screen
    var procX = x/window.innerWidth;
    var procY = y/window.innerHeight;

    // compute new coordinates in pixels for lat and lng;
    // for lng : subtract from the right edge of the container the left edge,
    // multiply it by the percentage where the x coordinate was on the screen
    // related to the container in which the map is placed and add back the left boundary
    // you should now have the Lng coordinate in pixels
    // do the same for lat
    var newLngInPx = (neBoundInPx.x - swBoundInPx.x) * procX + swBoundInPx.x;
    var newLatInPx = (swBoundInPx.y - neBoundInPx.y) * procY + neBoundInPx.y;

    // convert from google point in lat lng and have fun :)
    var newLatLng = map.getProjection().fromPointToLatLng(new google.maps.Point(newLngInPx, newLatInPx));

    return newLatLng;
}

which I found from another SO post, but the distances I am getting are always wrong. For example, if I have two markers on the map, no matter where I put the leap motion cursor, my function will always tell me that the closest one is marker B.

Any help on converting between vector (X,Y) and lat/long would be greatly appreciated, thanks!

Answer 1

So it seems like the first step you want to isolate, debug, and make sure is working is this: make sure you're happy with the way leap motion position coordinates is converted in to screen pixel coordinates.

This can be a little tricky in 2d, as typically we throw away the z dimension and then introduce a linear scale factor to convert from mm to px.

Have you tried out this example? https://developer.leapmotion.com/libraries/screenposition-plugin

Source code: https://github.com/leapmotion/leapjs-plugins/tree/master/main/screen-position

With that, you can plug in your pixel coordinates to any API which requires a screen position (usually from a mouse).