Add option for scientific/normal numerical representations

frontend/src/components/Map.js

@@ -68,6 +68,8 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
     const [polygonArea, setPolygonArea] = useState(null);
     const [areaUnit, setAreaUnit] = useState('sqm'); // 'sqm', 'sqkm', 'ha', 'acres', 'sqmi'
     
+    const [numberFormat, setNumberFormat] = useState('normal'); // 'normal' | 'scientific'
+
     const handleMouseDown = (e) => {
         isDragging.current = true;
         startX.current = e.clientX;
@@ -434,7 +436,12 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                                 boxShadow: 'none',
                                 padding: 0
                             }}>
-                                {geoDistance.toFixed(2)} {geoUnit}
+                                {geoDistance !== null
+                                    ? (numberFormat === 'scientific'
+                                        ? geoDistance.toExponential(2)
+                                        : geoDistance.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })
+                                    ) + ' ' + geoUnit
+                                    : ''}
                             </span>
                         </Tooltip>
                         )}
@@ -461,7 +468,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, areaUnit)}</div>`
+                                        ? `<div style="background:rgba(255,255,255,0.8);padding:2px 6px;border-radius:4px;color:#1976d2;font-weight:600;">${formatArea(polygonArea, areaUnit, numberFormat)}</div>`
                                         : '',
                                     iconSize: [100, 24],
                                     iconAnchor: [50, 12]
@@ -619,9 +626,23 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                                         <option value="mi">Miles</option>
                                     </select>
                                 </div>
+                                <div>
+                                    <label style={{ fontWeight: 500, marginRight: 8 }}>Number format:</label>
+                                    <select
+                                        value={numberFormat}
+                                        onChange={e => setNumberFormat(e.target.value)}
+                                        style={{ padding: '4px 8px', borderRadius: 4, border: '1px solid #ccc' }}
+                                    >
+                                        <option value="normal">Normal</option>
+                                        <option value="scientific">Scientific</option>
+                                    </select>
+                                </div>
                                 {geoDistance !== null && (
                                     <div style={{ fontSize: 20, fontWeight: 600, color: '#1976d2' }}>
-                                        {geoDistance.toFixed(2)} {geoUnit}
+                                        {numberFormat === 'scientific'
+                                            ? geoDistance.toExponential(2)
+                                            : geoDistance.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })
+                                        }
                                     </div>
                                 )}
                                 <button
@@ -668,7 +689,7 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                                 </div>
                                 {polygonArea !== null && (
                                     <div style={{ fontSize: 20, fontWeight: 600, color: '#1976d2' }}>
-                                        {formatArea(polygonArea, areaUnit)}
+                                        {formatArea(polygonArea, areaUnit, numberFormat)}
                                     </div>
                                 )}
                                 <button
@@ -703,6 +724,17 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                                         <option value="mi2">mi²</option>
                                     </select>
                                 </div>
+                                <div>
+                                    <label style={{ fontWeight: 500, marginRight: 8 }}>Number format:</label>
+                                    <select
+                                        value={numberFormat}
+                                        onChange={e => setNumberFormat(e.target.value)}
+                                        style={{ padding: '4px 8px', borderRadius: 4, border: '1px solid #ccc' }}
+                                    >
+                                        <option value="normal">Normal</option>
+                                        <option value="scientific">Scientific</option>
+                                    </select>
+                                </div>
                             </>
                         )}
                     </div>

frontend/src/utils/mapUtils.js

@@ -110,25 +110,31 @@ function getPolygonCentroid(points) {
     return [x / n, y / n];
 }
 
-function formatArea(area, unit = 'sqm') {
+function formatArea(area, unit = 'sqm', format = "normal") {
 
     if (typeof area !== 'number' || isNaN(area)) {
         return 'Invalid area';
     }
-
+    let value;
     switch (unit) {
         case "km2":
-            return (area / 1e6).toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 }) + ' km²';
+            value = area / 1e6;
+            return (format === "scientific" ? value.toExponential(2) : value.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })) + ' km²';
         case "ha":
-            return (area / 1e4).toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 }) + ' ha';
+            value = area / 1e4;
+            return (format === "scientific" ? value.toExponential(2) : value.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })) + ' ha';
         case "sqm":
-            return area.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 }) + ' m²';
+            value = area;
+            return (format === "scientific" ? value.toExponential(2) : value.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })) + ' m²';
         case "acres":
-            return (area / 4046.8564224).toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 }) + ' acres';
+            value = area / 4046.8564224;
+            return (format === "scientific" ? value.toExponential(2) : value.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })) + ' acres';
         case "mi2":
-            return (area / 2589988.110336).toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 }) + ' sq mi';
+            value = area / 2589988.110336;
+            return (format === "scientific" ? value.toExponential(2) : value.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })) + ' mi²';
         default:
-            return area.toFixed(2).toLocaleString() + ' m²'; // Default
+            value = area;
+            return (format === "scientific" ? value.toExponential(2) : value.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })) + ' m²';
     }
 }