javascript coordinate conversions between 900913(3857) - 4326(lat lon)

degrees2meters.js

var degrees2meters = function(lon,lat) {
  var x = lon * 20037508.34 / 180;
  var y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180);
  y = y * 20037508.34 / 180;
  return [x, y]
}
//test
lon= -77.035974
lat = 38.898717

console.log(degrees2meters(lon,lat))

// should result in: -8575605.398444, 4707174.018280

meters2degrees.js

var meters2degress = function(x,y) {
  var lon = x *  180 / 20037508.34 ;
  //thanks magichim @ github for the correction
  var lat = Math.atan(Math.exp(y * Math.PI / 20037508.34)) * 360 / Math.PI - 90; 
  return [lon, lat]
}
//test
x= -8575605.398444
y = 4707174.018280

console.log(meters2degress(x,y))

//should result in: -77.035974, 38.898717

I am not an expert, but maybe you forgot to reverse "y = y * 20037508.34 / 180" operation for meters2degress.

var lat = Math.atan(Math.exp(y * Math.PI / 20037508.34)) * 360 / Math.PI - 90;

Great! thanks will update asap :D

Is this for lat/lon encoded as EPSG:900913/EPSG:3857/WGS 84 Web Mercator meters or some other projection?

@onderaltintas
It seems that meter2degree lat value is wrong. change please as var lat = Math.atan(Math.exp(y * Math.PI / 20037508.34)) * 360 / Math.PI - 90;

@magichim
done, didn't check if it was correct, I trust you :)

You can simplify the math a little bit in degrees2meters:

var y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180);
y = y * 20037508.34 / 180;

Is the same as:
var y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) * 20037508.34 / Math.PI;

Man.. you are genious! Thank you so much!

Thank you all for your contributions. Couldn't check latest simplification comment unfortunately due to high work loads :S

I must tell you don't use it to measure distances cause it has higher error values. It is just for projecting latitude,longitude coordinates to 900913 or 3857 etc. For small distances it works but for long distances it won't work.

By the way c++ derivations are most welcome.

Regards,

@onderaltintas thank you for your work! I've implemented the degrees2meters.js part and it work perfectly for lon but it gives me another value for lat. Using your example it gives me -6639229.104382756 for lat = 38.898717. I can't understand where is the problem. Thank you in advance if you can help me!

@AnaKuzina Just tryed, it seems it is working on js with test numbers. On the other hand if it is on another programming language, maybe Math functions might be working differently (consider radian-degree transitions). Also maybe you misplaced lat,lon but I checked, it doesn't seem like that. If you can provide your own code I can tell where is wrong. At this rate, it is bit hard while above code seems to be working.

@onderaltintas thank you for your reply! Here is the code:

var degrees2meters = function(lon, lat) {
  var x = lon * 20037508.34 / 180;
  var y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180);
  y = y * 20037508.34 / 180;
  return [x, y]
}

function get3857() {
  lat = $('#latitude').val();
  lon = $('#longitude').val();
  lon_lat = degrees2meters(lon, lat);
  
  $('#3857_lat').text(lon_lat[1]);
  $('#3857_lon').text(lon_lat[0]);
}

I use it on html where I insert lat and lon and click on button to transform it to 3857:
<tbody> <tr> <td> <div class="tool-body"> <input id="latitude"> <input id="longitude"> </div> </td> </tr> <tr> <td> <div class="tool-body"> <span id="3857_lat"></span> <span id="3857_lon"></span> </div> </td> <td><button onClick="get3857()">Get 3857</button></td> </tr> </tbody>

@AnaKuzina
Heyo again,
I will point 2 situations here.
1-Input values have problem. You are giving input values as text but considering they are numbers. You are getting texts from your inputs. You should either cast'em to Numbers or change the type of your inputs to Number (can be more elegant since you can also set borders and do validations easier).

Try this code:
var degrees2meters = function(lon, lat) {
var x = lon * 20037508.34 / 180;
var y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180);
y = y * 20037508.34 / 180;
return [x, y]
}

function get3857() {
lat = Number($('#latitude').val());
lon = Number($('#longitude').val());
lon_lat = degrees2meters(lon, lat);

$('#3857_lat').text(lon_lat[1]);
$('#3857_lon').text(lon_lat[0]);
}

2- If it doesn't work, please change the places of lat and lon. %99.999 issues in gis domain comes from confusion on x,y,lat,lon,radian,degree...

@onderaltintas thank you so much! The code works perfect! Also i've changed type of the input fields as you've recommended! Thank you once again, I really appreciate your help!

May I know where did you get a formula for conversion?

May I know where did you get a formula for conversion?

Based on geometric knowledge and you can see the fixes happened in the past by contribution of commenters.

you saved my life, thank you

you saved my life, thank you

I'm glad that I could help. But don't forget that it is just to translate 4326 to 900913(3857) and visa versa. This calculation cannot be used for length measurements because of high error margin.