Add polygon area feature

Measure area feature is now available on the sidebar. The actual function that calculates the area is gpt-slop, however tweaking it is much easier, it's not a bottleneck.

frontend/src/components/Map.js

@@ -7,11 +7,12 @@ import { MapContainer, TileLayer,
         Popup ,
         useMap,
         Polyline,
-        Tooltip
+        Tooltip,
+        Polygon
     } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
-import  generateGeodesicPoints  from '../utils/mapUtils';
+import { generateGeodesicPoints, calculatePolygonArea, getPolygonCentroid, formatArea } from '../utils/mapUtils';
 
 
 delete L.Icon.Default.prototype._getIconUrl;
@@ -29,7 +30,7 @@ const ClickHandler = ({ onClick }) => {
       },
     });
     return null;
-  };
+};
 
 const BACKEND_URL = process.env.REACT_APP_BACKEND_URL || 'http://localhost:8004';
 console.log(BACKEND_URL);
@@ -56,13 +57,16 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
     const [geoDistance, setGeoDistance] = useState(null);
 
     const [geoSidebarOpen, setGeoSidebarOpen] = useState(false);
-    const [geoToolMode, setGeoToolMode] = useState("menu"); // "menu" | "distance"
+    const [geoToolMode, setGeoToolMode] = useState("menu"); // "menu" | "distance" | "area"
     const [geoUnit, setGeoUnit] = useState('km');
 
     const [isGeoMarkerDragging, setIsGeoMarkerDragging] = useState(false);
 
     const distanceCache = useRef({});
 
+    const [areaPoints, setAreaPoints] = useState([]);
+    const [polygonArea, setPolygonArea] = useState(null);
+
     const handleMouseDown = (e) => {
         isDragging.current = true;
         startX.current = e.clientX;
@@ -177,40 +181,51 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
         setWikiWidth(20);
     };
 
-    const handleGeoClick = useCallback(async (lat, lon) => {
-        const updatedPoints = [...geoPoints, { lat, lon }];
-        if (updatedPoints.length > 2) {
-          updatedPoints.shift(); // keep only two
+    const handleMapClick = useCallback(async (lat, lon) => {
+        if (geoToolMode === "distance") {
+            const updatedPoints = [...geoPoints, { lat, lon }];
+            if (updatedPoints.length > 2) {
+              updatedPoints.shift(); // keep only two
+            }
+            setGeoPoints(updatedPoints);
+          
+            if (updatedPoints.length === 2) {
+                console.log("Fetching distance");
+              try {
+
+                const res = await fetch(`${BACKEND_URL}/geodistance`, {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify({
+                    lat1: updatedPoints[0].lat,
+                    lon1: updatedPoints[0].lon,
+                    lat2: updatedPoints[1].lat,
+                    lon2: updatedPoints[1].lon,
+                    unit: geoUnit,
+                  }),
+                });
+                const data = await res.json();
+                setGeoDistance(data.distance);
+                setGeoSidebarOpen(true);
+                console.log("Distance fetched:", data.distance);
+              } catch (err) {
+                console.error('Failed to fetch distance:', err);
+                setGeoDistance(null);
+              }
+            }
+        } else if (geoToolMode === "area") {
+            const updated = [...areaPoints, [lat, lon]];
+            setAreaPoints(updated);
         }
-        setGeoPoints(updatedPoints);
-      
-        if (updatedPoints.length === 2) {
-            console.log("Fetching distance");
-          try {
-
-            const res = await fetch(`${BACKEND_URL}/geodistance`, {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({
-                lat1: updatedPoints[0].lat,
-                lon1: updatedPoints[0].lon,
-                lat2: updatedPoints[1].lat,
-                lon2: updatedPoints[1].lon,
-                unit: geoUnit,
-              }),
-            });
-            const data = await res.json();
-            setGeoDistance(data.distance);
-            setGeoSidebarOpen(true);
-            console.log("Distance fetched:", data.distance);
-          } catch (err) {
-            console.error('Failed to fetch distance:', err);
-            setGeoDistance(null);
-          }
+
+        else {
+            // setMarkerPosition([lat, lon]);
+            console.log("Invalid tool mode:", geoToolMode);
         }
-      }, [geoPoints, geoUnit]);
 
-      useEffect(() => {
+    }, [geoToolMode, geoPoints, geoUnit, areaPoints]);
+
+    useEffect(() => {
         if (geoPoints.length === 2) {
             const cacheKey = `${geoPoints[0].lat},${geoPoints[0].lon}-${geoPoints[1].lat},${geoPoints[1].lon}-${geoUnit}`;
             if (distanceCache.current[cacheKey]) {
@@ -254,6 +269,17 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
         }
       }, [geoPoints, geoUnit, isGeoMarkerDragging]);
 
+    useEffect(() => {
+        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
+            setPolygonArea(area);
+        } else {
+            setPolygonArea(null);
+        }
+    }, [geoToolMode, areaPoints]);
+
     return (
         <div ref={containerRef} style={{ display: 'flex', height: '100vh', width: '100%', overflow: 'hidden' }}>
             {panelSize !== 'closed' && (
@@ -332,7 +358,7 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                     />
-                    <ClickHandler onClick={handleGeoClick} />
+                    <ClickHandler onClick={handleMapClick} />
                     {markerPosition && (
                         <Marker position={markerPosition}>
                             {contentType === 'summary' && (
@@ -380,7 +406,7 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                         </Marker>
                     ))}
 
-                    {/* Polyline if 2 points are selected and sidebar is open */}
+                    {/* Polyline if 2 points are selected and sidebar is open, simple enough */}
                     {geoSidebarOpen && geoToolMode === "distance" && geoPoints.length === 2 && (
                     <Polyline 
                         key={geoPoints.map(pt => `${pt.lat},${pt.lon}`).join('-')}
@@ -414,6 +440,58 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                     </Polyline>
                     )}
 
+                    {/* Area tools */}
+                    {geoSidebarOpen && geoToolMode === "area" && areaPoints.length >= 2 && (
+                        <Polyline
+                            positions={areaPoints}
+                            pathOptions={{ color: '#1976d2', weight: 3, dashArray: '4 6' }}
+                        />
+                    )}
+                    {geoSidebarOpen && geoToolMode === "area" && areaPoints.length >= 3 && (
+                        <>
+                            <Polygon
+                                positions={areaPoints}
+                                pathOptions={{ color: '#1976d2', fillColor: '#1976d2', fillOpacity: 0.2 }}
+                            />
+                            {/* Area label at centroid */}
+                            <Marker
+                                position={getPolygonCentroid(areaPoints)}
+                                interactive={false}
+                                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>`
+                                        : '',
+                                    iconSize: [100, 24],
+                                    iconAnchor: [50, 12]
+                                })}
+                            />
+                        </>
+                    )}
+                    {geoSidebarOpen && geoToolMode === "area" && areaPoints.map((pt, idx) => (
+                        <Marker
+                            key={`area-${idx}`}
+                            position={[pt[0], pt[1]]}
+                            draggable={true}
+                            eventHandlers={{
+                                dragstart: () => {
+                                    setIsGeoMarkerDragging(true);
+                                },
+                                dragend: (e) => {
+                                    const { lat, lng } = e.target.getLatLng();
+                                    const updated = [...areaPoints];
+                                    updated[idx] = [lat, lng];
+                                    setAreaPoints(updated);
+                                    setIsGeoMarkerDragging(false);
+                                }
+                            }}
+                        >
+                            <Popup>
+                                Point {idx + 1}: {pt[0].toFixed(4)}, {pt[1].toFixed(4)}
+                            </Popup>
+                        </Marker>
+                    ))}
+
                 </MapContainer>
 
                 {/* Geo Tools Button */}
@@ -490,6 +568,21 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                                 >
                                     Measure distance
                                 </button>
+                                <button
+                                    style={{
+                                        marginTop: 16,
+                                        padding: '10px 0',
+                                        borderRadius: 4,
+                                        border: '1px solid #1976d2',
+                                        background: '#1976d2',
+                                        color: 'white',
+                                        fontWeight: 500,
+                                        cursor: 'pointer'
+                                    }}
+                                    onClick={() => setGeoToolMode("area")}
+                                >
+                                    Measure area
+                                </button>
                                 {/* Add more tool buttons here in the future */}
                             </>
                         )}
@@ -551,6 +644,53 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                                 </button>
                             </>
                         )}
+
+                        {geoToolMode === "area" && (
+                            <>
+                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                    <strong>Area</strong>
+                                    <button
+                                        onClick={() => {
+                                            setGeoToolMode("menu");
+                                            setAreaPoints([]);
+                                            setPolygonArea(null);
+                                        }}
+                                        style={{
+                                            background: 'none',
+                                            border: 'none',
+                                            fontSize: 18,
+                                            cursor: 'pointer',
+                                            color: '#888'
+                                        }}
+                                        title="Back"
+                                    >←</button>
+                                </div>
+                                {polygonArea !== null && (
+                                    <div style={{ fontSize: 20, fontWeight: 600, color: '#1976d2' }}>
+                                        {formatArea(polygonArea)}
+                                    </div>
+                                )}
+                                <button
+                                    onClick={() => {
+                                        setGeoToolMode("menu");
+                                        setAreaPoints([]);
+                                        setPolygonArea(null);
+                                    }}
+                                    style={{
+                                        marginTop: 8,
+                                        padding: '6px 0',
+                                        borderRadius: 4,
+                                        border: '1px solid #1976d2',
+                                        background: '#1976d2',
+                                        color: 'white',
+                                        fontWeight: 500,
+                                        cursor: 'pointer'
+                                    }}
+                                >
+                                    Clear & Back
+                                </button>
+                            </>
+                        )}
                     </div>
                 )}
 
@@ -577,4 +717,5 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
     );
 };
 
+
 export default Map;

frontend/src/utils/mapUtils.js

@@ -1,3 +1,4 @@
+
 // Haversine-based geodesic interpolator
 function generateGeodesicPoints(lat1, lon1, lat2, lon2, numPoints = 512) {
     /**
@@ -44,4 +45,75 @@ function generateGeodesicPoints(lat1, lon1, lat2, lon2, numPoints = 512) {
     return points;
 }
 
-export default generateGeodesicPoints;
+
+
+ /**
+ * 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) {
+    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;
+}
+
+
+function getPolygonCentroid(points) {
+    // Simple centroid calculation for small polygons
+    let x = 0, y = 0, n = points.length;
+    points.forEach(([lat, lon]) => { x += lat; y += lon; });
+    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²';
+}
+
+export {generateGeodesicPoints, calculatePolygonArea, getPolygonCentroid, formatArea};
+    // calculatePolygonArea