Skip to content

Instantly share code, notes, and snippets.

@onderaltintas
Forked from springmeyer/degress2meters.js
Last active April 12, 2022 01:38
Show Gist options
  • Save onderaltintas/6649521 to your computer and use it in GitHub Desktop.
Save onderaltintas/6649521 to your computer and use it in GitHub Desktop.
javascript coordinate conversions between 900913(3857) - 4326(lat lon)
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
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
@techfan101
Copy link

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;

@PSimple
Copy link

PSimple commented Feb 6, 2020

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

@onderaltintas
Copy link
Author

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,

@AnaKuzina
Copy link

@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!

@onderaltintas
Copy link
Author

@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.

@AnaKuzina
Copy link

AnaKuzina commented Apr 6, 2020

@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>

@onderaltintas
Copy link
Author

@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...

@AnaKuzina
Copy link

AnaKuzina commented Apr 6, 2020

@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!

@bolatuly
Copy link

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

@onderaltintas
Copy link
Author

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.

@vuhung3990
Copy link

you saved my life, thank you

@onderaltintas
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment