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