Understanding Coordinate Reference Systems (CRS)

When working with geospatial data, it is crucial for every Geo developer to recognize the Coordinate Reference System (CRS) used for the geographical coordinates.

A Brief Overview of CRS

Given that the Earth is a sphere, various spatial projections and mathematical transformations must be applied to XY coordinates to accurately represent them on a flat, two-dimensional map:

Illustration by Author | The representation of XY coordinates differs across various regions including the Americas, Europe, and Asia-Australia.

While services like EPSG.io offer one-off conversions, practical applications often require batch processing. Additionally, for sensitive datasets, offline processing is generally more prudent than utilizing public online services.

The Proj4.js library has been developed precisely for these scenarios.

Use Case Example: Singapore

For instance, Singapore operates on the SVY 21 coordinate system for its XY values.

Illustration by Author | The Well Known Text (WKT) above details the spatial projection for Singapore utilized in Proj4.js.

#### Explanation

The source of the XY values typically defines its WKT. In this case, the XY values were acquired from the Singapore Land Authority (SLA) via its mapping service, Onemap. The SLA designates the SVY21 as its official 2D CRS. Consulting EPSG.io yields the corresponding WKT document for this projection system (as illustrated above).

This leads to the following implementation in Proj4.js:

proj4.defs('EPSG:3414', '+proj=tmerc +lat_0=1.366666666666667 +lon_0=103.8333333333333 +k=1 +x_0=28001.642 +y_0=38744.572 +ellps=WGS84 +units=m +no_defs');

The code snippet below provides an array containing a pair of [Lat, Lng]:

var fromProj = proj4.defs('EPSG:3414'); var toProj = proj4.defs('EPSG:4326'); proj4(fromProj, toProj, [x, y]) // [lat, lng]

To support various Coordinate Reference Systems (CRS), a compiled list of definitions can be found at: proj4-list (thanks to GitHub user: Josueggh).

Note: A streamlined version of projections (excluding undefined and empty values) is available as a native JavaScript object on my GitHub: proj4_list.js.

Building a Browser Tool to Convert XY to LatLng

To facilitate conversions, incorporate the following JavaScript libraries:

<script src='proj4.js'></script><!-- proj4 plugin --> <script src='proj4_list.js'></script><!-- object of CRS list --> <script src='json2csv.js'></script><!-- plugin for data export -->

Assuming the input data is formatted as a CSV file, a user-friendly interface can be created on an HTML page. This allows users to upload a data file containing XY values in two columns, producing an output CSV file with two additional columns: "LATITUDE" and "LONGITUDE," calculated via Proj4.js.

Illustration by Author | Example output from the tool with added columns for [LATITUDE] & [LONGITUDE].

Combining everything, the final version of the XY to LatLng Browser Tool appears as follows:

Screencapture by Author | The dropdown list displays available CRS options. EPSG for the coordinates is 3414 (the list is sorted).

Note: To run the tool, simply double-click the HTML file and open it in any browser that supports JavaScript. (No server setup is needed.) For the complete source code, feel free to fork the repository from my GitHub at: xy-to-latlng-convertor or check it out here!

Conclusion

Thank you for sticking with me through this guide! I hope you have found this information helpful. For more insights related to GIS, Data Analytics, and web applications, consider following me on Medium. Your support would be greatly appreciated!

For additional resources, visit plainenglish.io. Sign up for our free weekly newsletter for exclusive writing opportunities and community advice on Discord.

Chapter 2: Video Tutorials

This first video provides a detailed tutorial on converting geographic coordinates to projected coordinates using Global Mapper.

The second video focuses on converting WGS-84 latitude and longitude to UTM (Easting, Northing) using QGIS.