Search code examples
leafletprojection

how convert coordinates from UTM Ghana meter Grid to Latitude Longitude and vice versa from leaflet js

I'm working on leaflet Js in which I expect user inputs of coordinates in X, Y form. i.e. Ghana meter Grid and I need to convert the X, Y into latitudes, and longitudes so that they can be plotted as markers on leaflet Js.

Solution

  • Since you are working with Javascript, I suggest to approach this problem with proj4js (the Javascript implementation of OSGeo's proj, the industry standard for converting coordinates between coordinate reference systems).

    First, grab a release of proj4js, or use a CDN-hosted release, e.g.:

    <script src='https://unpkg.com/proj4@2.6.2/dist/proj4.js'></script>

    Proj4js doesn't come with the full definition list of CRSs (Coordinate Reference Systems), so you'll have to define the CRSs you want to work with. In your case, it's gonna be EPSG:25000 AKA "Ghana Metre Grid" and EPSG:4326 AKA "Equirectangular WGS84" AKA "latitude-longitude":

    proj4.defs("EPSG:4326","+proj=longlat +datum=WGS84 +no_defs");
proj4.defs("EPSG:25000","+proj=tmerc +lat_0=4.666666666666667 +lon_0=-1 +k=0.99975 +x_0=274319.51 +y_0=0 +ellps=clrk80 +towgs84=-130,29,364,0,0,0,0 +units=m +no_defs");

    You can fing the PROJ definitions of CRSs in either the data files of a PROJ release, or websites such as epsg.io.

    Once the CRSs have been defined, call proj4js with their names and the coordinates to transform, e.g. to transform from EPSG:4326 to EPSG:25000...

    console.log(  proj4("EPSG:4326", "EPSG:25000", [-0.187, 5.6037])  );

    ...or from EPSG:25000 to EPSG:4326...

    console.log(  proj4("EPSG:25000", "EPSG:4326", [364346.57, 103339.95])  );

    See a working example here.

    Be wary of the order of coordinates (lat-lon vs lon-lat, or x-y vs y-x). Leaflet uses lat-lng, but proj uses x-y and lng-lat, so you'll have to flip the coordinates, e.g.

    var accraLngLat = proj4("EPSG:25000", "EPSG:4326", [364346.57, 103339.95]);
L.marker([accraLngLat[1], accraLngLat[0]]).addTo(map);

    or

    var accraLngLat = proj4("EPSG:25000", "EPSG:4326", [364346.57, 103339.95]);
var accraLatLng = L.GeoJSON.coordsToLatLng(accraLngLat);
L.marker(accraLatLng).addTo(map);

    See a working example here.

    Also note that proj4js does all the reprojection work and there are no API calls involved.

    Since you are specifically working with Leaflet, you might also be interested in proj4leaflet, although you might not need it. It'll be useful if you want to use Leaflet to display raster data (or map tiles) in different projections.