Display perimeter in addition to area of a closed polygon

README.md

@@ -19,3 +19,7 @@ pinned: false
 - Use `localtunnel` for backend, `ngrok http 8004` (I don't want remote users to have to enter password or click on a suspicious looking link).
 - It works, I tested it on my phone, but it doesn't work on sandbox, most likely due to sandbox's requirement of `Authentication` from backend. Throws an `Error 511`.
 - Unfortunately, user still has to visit the `localtunnel` link to avoid `Network Authentication` issue. For that they would reuire the `localtunnel` link, and a password, which can be obtianed from `https://loca.lt/mytunnelpassword`, on the device that is hosting the codebase.
+
+## Resources
+- [Geodesic Area calculator](https://geographiclib.sourceforge.io/cgi-bin/Planimeter?type=polygon&rhumb=geodesic&radius=6378137&flattening=1%2F298.257223563&input=40.7128%2C+-74.0060%0D%0A34.0522%2C+-118.2437%0D%0A51.5074%2C+0.1278&option=Submit)
+- [Area calculator function in geographiclib-geodesic module's codebase](https://github.com/geographiclib/geographiclib-js/blob/main/geodesic/PolygonArea.js)

frontend/src/components/Map.js

@@ -12,7 +12,7 @@ import { MapContainer, TileLayer,
     } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
-import { generateGeodesicPoints, calculatePolygonArea, getPolygonCentroid, formatArea } from '../utils/mapUtils';
+import { generateGeodesicPoints, calculatePolygonArea, getPolygonCentroid, formatArea, formatPerimeter } from '../utils/mapUtils';
 
 
 delete L.Icon.Default.prototype._getIconUrl;
@@ -70,6 +70,8 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
     
     const [numberFormat, setNumberFormat] = useState('normal'); // 'normal' | 'scientific'
 
+    const [polygonPerimeter, setPolygonPerimeter] = useState(null);
+
     const handleMouseDown = (e) => {
         isDragging.current = true;
         startX.current = e.clientX;
@@ -276,10 +278,13 @@ 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); // This took me a while to figure out, it should be just (lat, lon), not (lon, lat)
+            const {area, perimeter} = calculatePolygonArea(closed); // This took me a while to figure out, it should be just (lat, lon), not (lon, lat)
             setPolygonArea(area);
+            setPolygonPerimeter(perimeter);
+            // console.log("Polygon area:", area, "Perimeter:", perimeter);
         } else {
             setPolygonArea(null);
+            setPolygonPerimeter(null);
         }
     }, [geoToolMode, areaPoints]);
 
@@ -676,6 +681,7 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                                             setGeoToolMode("menu");
                                             setAreaPoints([]);
                                             setPolygonArea(null);
+                                            setPolygonPerimeter(null);
                                         }}
                                         style={{
                                             background: 'none',
@@ -692,11 +698,17 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                                         {formatArea(polygonArea, areaUnit, numberFormat)}
                                     </div>
                                 )}
+                                {polygonPerimeter !== null && (
+                                    <div style={{ fontSize: 16, color: '#555' }}>
+                                        Perimeter: {formatPerimeter(polygonPerimeter, areaUnit, numberFormat)}
+                                    </div>
+                                )}
                                 <button
                                     onClick={() => {
                                         setGeoToolMode("menu");
                                         setAreaPoints([]);
                                         setPolygonArea(null);
+                                        setPolygonPerimeter(null);
                                     }}
                                     style={{
                                         marginTop: 8,
@@ -722,6 +734,8 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                                         <option value="km2">km²</option>
                                         <option value="ha">ha</option>
                                         <option value="mi2">mi²</option>
+                                        <option value="acres">acres</option>
+                                        <option value="sqft">ft²</option>
                                     </select>
                                 </div>
                                 <div>

frontend/src/utils/mapUtils.js

@@ -62,8 +62,9 @@ function calculatePolygonArea(coords) {
 
   // 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.
+  const result = poly.Compute(); // Returns object (number (of vertices), perimeter, area)
+  //console.log(result)
+  return {area: result.area, perimeter: result.perimeter}; // area in square meters, important.
 }
 
 function getPolygonCentroid(points) {
@@ -96,11 +97,41 @@ function formatArea(area, unit = 'sqm', format = "normal") {
         case "mi2":
             value = area / 2589988.110336;
             return (format === "scientific" ? value.toExponential(2) : value.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })) + ' mi²';
+        case "sqft":
+            value = area * 10.76391041671;
+            return (format === "scientific" ? value.toExponential(2) : value.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })) + ' ft²';
         default:
             value = area;
             return (format === "scientific" ? value.toExponential(2) : value.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })) + ' m²';
     }
 }
+function formatPerimeter(perimeter, unit = 'sqm', format = "normal") {
+    if (typeof perimeter !== 'number' || isNaN(perimeter)) {
+        console.log('Invalid perimeter input:', perimeter);
+        return 'Invalid perimeter';
+    }
+    let value;
+    switch (unit) {
+        case "km2":
+            value = perimeter / 1000;
+            return (format === "scientific" ? value.toExponential(2) : value.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })) + ' km';
+        case "ha":
+            value = perimeter / 1000;
+            return (format === "scientific" ? value.toExponential(2) : value.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })) + ' km';
+        case "m2":
+            value = perimeter;
+            return (format === "scientific" ? value.toExponential(2) : value.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })) + ' m';
+        case "mi2":
+            value = perimeter / 1609.344;
+            return (format === "scientific" ? value.toExponential(2) : value.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })) + ' mi';
+        case "sqft":
+            value = perimeter * 3.280839895013123; // meters to feet
+            return (format === "scientific" ? value.toExponential(2) : value.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })) + ' ft';
+        default:
+            value = perimeter;
+            return (format === "scientific" ? value.toExponential(2) : value.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })) + ' m';
+    }
+}
 
-export {generateGeodesicPoints, calculatePolygonArea, getPolygonCentroid, formatArea};
+export {generateGeodesicPoints, calculatePolygonArea, getPolygonCentroid, formatArea, formatPerimeter};
     // calculatePolygonArea