Question

I think I have two different questions here, I’m building off this question. Id like to take this one step more and convert the px values to true latitude and longitude coordinates.

So I would like to turn 251px N, 10px E to 40° 10′ 33” N, 3° 4′ 56” E

40° = 40 degrees

10′ = 10 minutes

33” = 33 seconds

or 40.133 I think but when minutes go to 60 it kicks the next degree up one. so 41 when its 40.559 + 1 more second. I hope someone understands.

var screenX = $(document).width() / 2;
var screenY = $(document).height() / 2;

$(document).mousemove(function(e){

var apX = screenX - e.pageX;
var apY = screenY - e.pageY;

var latT = (apY>=0) ? 'N' : 'S';
var lonT = (apX>=0) ? 'W' : 'E';

apX = Math.round(Math.abs(apX));
apY = Math.round(Math.abs(apY));

$('#detect').html( apX  + 'px '+ latT +', '+ apY + 'px '+ lonT  );

});

Demo of the above code. Any advice?

Answer 1

Something like this should work:

$('#detect').html( toGeo(apX, screenX)  + latT +', '+ toGeo(apY, screenY) + lonT  );

function toGeo(d, max) {
   var c = '';

   var r = d/max * 180;
   var deg = Math.floor(r);
   c += deg + "° ";

   r = (r - deg) * 60;
   var min = Math.floor(r);
   c += min + "′ ";

   r = (r - min) * 60;
   var sec = Math.floor(r);
   c += sec + "″";

   return c;
}

Just as a reminder: These are “fake” coordinates, they won’t correspond to a real map.