Add options for 5 different units for area feature

frontend/src/components/Map.js

@@ -66,7 +66,8 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
 
     const [areaPoints, setAreaPoints] = useState([]);
     const [polygonArea, setPolygonArea] = useState(null);
-
+    const [areaUnit, setAreaUnit] = useState('sqm'); // 'sqm', 'sqkm', 'ha', 'acres', 'sqmi'
+    
     const handleMouseDown = (e) => {
         isDragging.current = true;
         startX.current = e.clientX;
@@ -460,7 +461,7 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                                 icon={L.divIcon({
                                     className: 'area-label',
                                     html: polygonArea !== null
-                                        ? `<div style="background:rgba(255,255,255,0.8);padding:2px 6px;border-radius:4px;color:#1976d2;font-weight:600;">${formatArea(polygonArea)}</div>`
+                                        ? `<div style="background:rgba(255,255,255,0.8);padding:2px 6px;border-radius:4px;color:#1976d2;font-weight:600;">${formatArea(polygonArea, areaUnit)}</div>`
                                         : '',
                                     iconSize: [100, 24],
                                     iconAnchor: [50, 12]
@@ -667,7 +668,7 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                                 </div>
                                 {polygonArea !== null && (
                                     <div style={{ fontSize: 20, fontWeight: 600, color: '#1976d2' }}>
-                                        {formatArea(polygonArea)}
+                                        {formatArea(polygonArea, areaUnit)}
                                     </div>
                                 )}
                                 <button
@@ -689,6 +690,19 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                                 >
                                     Clear & Back
                                 </button>
+                                <div>
+                                    <label style={{ fontWeight: 500, marginRight: 8 }}>Unit:</label>
+                                    <select
+                                        value={areaUnit}
+                                        onChange={e => setAreaUnit(e.target.value)}
+                                        style={{ padding: '4px 8px', borderRadius: 4, border: '1px solid #ccc' }}
+                                    >
+                                        <option value="m2">m²</option>
+                                        <option value="km2">km²</option>
+                                        <option value="ha">ha</option>
+                                        <option value="mi2">mi²</option>
+                                    </select>
+                                </div>
                             </>
                         )}
                     </div>

frontend/src/utils/mapUtils.js

@@ -52,7 +52,7 @@ function generateGeodesicPoints(lat1, lon1, lat2, lon2, numPoints = 512) {
  * @param {Array<Array<number>>} coordinates - Array of [lat, lon] pairs in decimal degrees
  * @returns {number} Area in square meters
  */
-function calculatePolygonArea(coordinates) {
+function calculatePolygonArea(coordinates, output_unit = 'sqm') {
     if (!coordinates || coordinates.length < 3) {
         throw new Error('At least 3 coordinates are required');
     }
@@ -98,7 +98,8 @@ function calculatePolygonArea(coordinates) {
     // Convert to actual area using ellipsoid parameters
     const ellipsoidArea = Math.abs(area) * (a * a / 2) * (1 - e2);
     
-    return ellipsoidArea;
+    return ellipsoidArea; // Return area in square meters
+    
 }
 
 
@@ -109,10 +110,26 @@ function getPolygonCentroid(points) {
     return [x / n, y / n];
 }
 
-function formatArea(area) {
-    if (area > 1e6) return (area / 1e6).toFixed(2) + ' km²';
-    if (area > 1e4) return (area / 1e4).toFixed(2) + ' ha';
-    return area.toFixed(2) + ' m²';
+function formatArea(area, unit = 'sqm') {
+
+    if (typeof area !== 'number' || isNaN(area)) {
+        return 'Invalid area';
+    }
+
+    switch (unit) {
+        case "km2":
+            return (area / 1e6).toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 }) + ' km²';
+        case "ha":
+            return (area / 1e4).toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 }) + ' ha';
+        case "sqm":
+            return area.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 }) + ' m²';
+        case "acres":
+            return (area / 4046.8564224).toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 }) + ' acres';
+        case "mi2":
+            return (area / 2589988.110336).toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 }) + ' sq mi';
+        default:
+            return area.toFixed(2).toLocaleString() + ' m²'; // Default
+    }
 }
 
 export {generateGeodesicPoints, calculatePolygonArea, getPolygonCentroid, formatArea};