Skip to main content

EPSG:3857 and EPSG:4326... How to transform coordinates between them?

· 4 min read
Lucas Serral

When working with maps and geographic spaces in software development, it is very common to come across different EPSG coordinate references. EPSG:3857 and EPSG:4326 are are two of the most used ones.

In some cases, it is necessary to switch from one to the other so that the project to be developed is consistent with the rest of the project or compatible with the platform on which we are developing.

EPSG:3857, EPSG:4326

In the case of web projects, there are many libraries that can help us do these transformations. But this can lead to importing files and dependencies that we don't really need, so the project gets unnecessarily large.

Generally, this is something we want to avoid and we would rather look to do these transformations internally in our code as a function or module.

So how can we achieve it? In this article I will show you how.

How do we differentiate EPSG:4326 from EPSG:3857?​

First of all, it is necessary to know what we have and what we want to obtain. To do that, it is necessary to recognize these two spatial reference systems. Once we are sure that our coordinates belong to one of these two coordinate reference systems, recognizing which is which is a simple task.

It should be noted that while Auravant uses the EPSG:4326 system in most cases, it may happen that an old API or SDK function returns coordinates in EPSG:3857.

The EPSG:4326 coordinates are represented by numbers between -180 and 180. Instead, the EPSG:3857 coordinates are numbers that exceed this range by huge values.

Example of coordinates in EPSG:4326

[2.294364273602696, 48.85882287559042]

Example of coordinates in EPSG:3857

[255407.46259617808, 6250940.450853652]

In this case, we will use the JavaScript language to implement the transformations so that they can be applied directly in the code of your extensions.

EPSG:4326 to EPSG:3857​

The following function converts coordinates from EPSG:4326 to EPSG:3857 in JavaScript.

function epsg4326toEpsg3857(coordinates) {
  let x = pos[0];
  let y = pos[1];
  x = (coordinates[0] * 20037508.34) / 180;
  y =
    Math.log(Math.tan(((90 + coordinates[1]) * Math.PI) / 360)) /
    (Math.PI / 180);
  y = (y * 20037508.34) / 180;
  return [x, y];
}

Being coordinates the coordinates that the function will receive as an argument, in Array(2) format where the first element will be the longitude and the second the latitude.

We are going to transform the length with a multiplication and division.

For latitude, we must do a transformation prior to multiplication and division. To understand:

  • Math object is a library that is integrated in Javascript and, in this case, we will not have to do extra imports.
  • Math.log() returns the natural logarithm of what it receives.
  • Math.tan() returns the tangent..
  • Math.PI refers to the PI number (3.14159…)

EPSG:3857 to EPSG:4326​

To calculate the transformations from EPSG:3857 to EPSG:4326, we can find the inverse of the previous function. In this case, we solved this problem to make your task easier.

function epsg3857toEpsg4326(pos) {
  let x = pos[0];
  let y = pos[1];
  x = (x * 180) / 20037508.34;
  y = (y * 180) / 20037508.34;
  y = (Math.atan(Math.pow(Math.E, y * (Math.PI / 180))) * 360) / Math.PI - 90;
  return [x, y];
}

What if we're not sure what spatial reference system we receive?​

It may happen that on some occasions we know that the developers of an API can change its response and that it begins to return another coordinate system. So how can we handle this?

A condition could be applied so that it performs the transformation only in the case that the absolute of the obtained coordinates have values greater than 180.

Assuming that we want to have the coordinates in the EPSG:4326 system regardless of whether we receive them in these or in EPSG:3857. Then:

function returnEPSG4326(coordinates) {
  if (Math.abs(coordinates[0]) > 180 || Math.abs(coordinates[1]) > 180) {
    coordinates = epsg3857toepsg4326(coordinates);
  }
  return coordinates;
}

If we pay attention, this works at the cost of a small margin of error, in the case where the coordinates are in the EPSG:3857 reference system and both the longitude and latitude are values whose module is less than 180 in both cases.

This is a fairly small margin of error and it is up to the developer to choose whether or not to implement it.

Conclusions​

In this article you saw how to perform transformations between two of the most widely used coordinate systems today: EPSG:3857 and EPSG:4326. You are now ready to implement these features in your Auravant extensions. Not sure how to get started? Let me invite you to see the following blog post: How to build an extension in Auravant from scratch, by Guillermo Gonzalez.