Fix area using geographiclib-geodesic package

- geodesiclib package is deprecated (2025). so i used geographiclib-geodesic package
- did plenty of trials on how to accurately calculated geodesic polygon's area.
- got error whenever I selected points in china or anywhere near that longitude.
- found out that i was actually inverting the (lat, lon) input to (lon, lat) and lat cannon > 90, while lon can be.

frontend/package-lock.json

@@ -13,6 +13,7 @@
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^13.5.0",
         "geodesy": "^2.4.0",
+        "geographiclib-geodesic": "^2.1.1",
         "leaflet": "^1.9.4",
         "leaflet.geodesic": "^2.7.1",
         "react": "^19.0.0-rc.1",
@@ -8509,6 +8510,12 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/geographiclib-geodesic": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/geographiclib-geodesic/-/geographiclib-geodesic-2.1.1.tgz",
+      "integrity": "sha512-lkd8EUkPSByobWu9BPMHTdYA5AUZxOa8McmUNtBE9KrvUJEvSADnN6gTDmhXbi6NzdA16LtWLpSxLE/lIIRhyA==",
+      "license": "MIT"
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",

frontend/package.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
     "geodesy": "^2.4.0",
+    "geographiclib-geodesic": "^2.1.1",
     "leaflet": "^1.9.4",
     "leaflet.geodesic": "^2.7.1",
     "react": "^19.0.0-rc.1",

frontend/src/components/Map.js

@@ -276,7 +276,7 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
         if (geoToolMode === "area" && areaPoints.length >= 3) {
             // Just ensuring that the polygon is closed (first == last)
             const closed = [...areaPoints, areaPoints[0]];
-            const area = calculatePolygonArea(closed.map(([lat, lon]) => [lon, lat])); // [lon, lat] for GeoJSON unfortunately
+            const area = calculatePolygonArea(closed.map(([lat, lon]) => [lat, lon])); // This took me a while to figure out, it should be just (lat, lon), not (lon, lat)
             setPolygonArea(area);
         } else {
             setPolygonArea(null);

frontend/src/utils/mapUtils.js

@@ -1,4 +1,4 @@
-
+import geodesic from 'geographiclib-geodesic';
 // Haversine-based geodesic interpolator
 function generateGeodesicPoints(lat1, lon1, lat2, lon2, numPoints = 512) {
     /**
@@ -47,61 +47,24 @@ function generateGeodesicPoints(lat1, lon1, lat2, lon2, numPoints = 512) {
 
 
 
- /**
- * Calculate the area enclosed by coordinates using simplified Karney method
- * @param {Array<Array<number>>} coordinates - Array of [lat, lon] pairs in decimal degrees
- * @returns {number} Area in square meters
- */
-function calculatePolygonArea(coordinates, output_unit = 'sqm') {
-    if (!coordinates || coordinates.length < 3) {
-        throw new Error('At least 3 coordinates are required');
-    }
-    
-    // WGS84 ellipsoid parameters
-    const a = 6378137.0;  // Semi-major axis (meters)
-    const f = 1 / 298.257223563;  // Flattening
-    const e2 = f * (2 - f);  // First eccentricity squared
-    
-    // Ensure polygon is closed
-    const coords = [...coordinates];
-    if (coords[0][0] !== coords[coords.length - 1][0] || 
-        coords[0][1] !== coords[coords.length - 1][1]) {
-        coords.push(coords[0]);
-    }
-    
-    let area = 0;
-    const n = coords.length - 1;
-    
-    // Calculate area using simplified geodesic excess method
-    for (let i = 0; i < n; i++) {
-        const [lat1, lon1] = coords[i];
-        const [lat2, lon2] = coords[i + 1];
-        
-        // Convert to radians
-        const phi1 = lat1 * Math.PI / 180;
-        const phi2 = lat2 * Math.PI / 180;
-        let dL = (lon2 - lon1) * Math.PI / 180;
-        
-        // Normalize longitude difference
-        while (dL > Math.PI) dL -= 2 * Math.PI;
-        while (dL < -Math.PI) dL += 2 * Math.PI;
-        
-        // Geodesic excess contribution
-        const E = 2 * Math.atan2(
-            Math.tan(dL / 2) * (Math.sin(phi1) + Math.sin(phi2)),
-            2 + Math.sin(phi1) * Math.sin(phi2) + Math.cos(phi1) * Math.cos(phi2) * Math.cos(dL)
-        );
-        
-        area += E;
-    }
-    
-    // Convert to actual area using ellipsoid parameters
-    const ellipsoidArea = Math.abs(area) * (a * a / 2) * (1 - e2);
-    
-    return ellipsoidArea; // Return area in square meters
-    
-}
+function calculatePolygonArea(coords) {
+    /*** Calculate the geodesic area of a polygon on the WGS84 ellipsoid.
+     * @param {Array<Array<number>>} coords - Array of [lat, lon] pairs.
+     * @returns {number} Area in square meters.
+    */
+//   console.log(coords); // Lifesaver
+  const geod = geodesic.Geodesic.WGS84;
+  const poly = geod.Polygon(false); // false = polygon, not polyline
+
+  for (const [lat, lon] of coords) {
+    poly.AddPoint(lat, lon);
+  }
 
+  // Closing the polygon is not required as I am already doing it in the frontend.
+
+  const result = poly.Compute();
+  return result.area; // area in square meters, important.
+}
 
 function getPolygonCentroid(points) {
     // Simple centroid calculation for small polygons
@@ -113,6 +76,7 @@ function getPolygonCentroid(points) {
 function formatArea(area, unit = 'sqm', format = "normal") {
 
     if (typeof area !== 'number' || isNaN(area)) {
+        console.log('Invalid area input:', area);
         return 'Invalid area';
     }
     let value;