Simple geodistancefeature with polyline and distance text rendering

- Added key near polyline to ensure that distance key changes as the input points change. Using ToolTip for rendering the distance.
- Distance Unit options not yet present
- The polyline that joins two points are just straight lines, not proper curves.

frontend/src/components/Map.js

@@ -5,9 +5,12 @@ import { MapContainer, TileLayer,
         useMapEvents,
         Marker, 
         Popup ,
-        useMap
+        useMap,
+        Polyline,
+        Tooltip
     } from 'react-leaflet';
 import L from 'leaflet';
+
 import 'leaflet/dist/leaflet.css';
 
 
@@ -18,11 +21,11 @@ L.Icon.Default.mergeOptions({
     shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
 });
 
-const ClickHandler = ({ onMapClick }) => {
+const ClickHandler = ({ onClick }) => {
     useMapEvents({
       click(e) {
         const { lat, lng } = e.latlng;
-        onMapClick(lat, lng);
+        onClick(lat, lng);
       },
     });
     return null;
@@ -49,6 +52,9 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
     const startWidth = useRef(0);
     const containerRef = useRef(null);
 
+    const [geoPoints, setGeoPoints] = useState([]);
+    const [geoDistance, setGeoDistance] = useState(null);
+
     const handleMouseDown = (e) => {
         isDragging.current = true;
         startX.current = e.clientX;
@@ -163,6 +169,37 @@ 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
+        }
+        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: 'km',
+              }),
+            });
+            const data = await res.json();
+            setGeoDistance(data.distance);
+          } catch (err) {
+            console.error('Failed to fetch distance:', err);
+            setGeoDistance(null);
+          }
+        }
+      }, [geoPoints]);
+
     return (
         <div ref={containerRef} style={{ display: 'flex', height: '100vh', width: '100%', overflow: 'hidden' }}>
             {panelSize !== 'closed' && (
@@ -241,7 +278,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 onMapClick={onMapClick}/>
+                    <ClickHandler onClick={handleGeoClick} />
                     <Marker position={markerPosition}>
                         {contentType === 'summary' && (
                         <Popup minWidth={250}>
@@ -256,6 +293,49 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                         </Popup>
                         )}
                     </Marker>
+
+                    {geoPoints.map((pt, index) => (
+                        <Marker key={`geo-${index}`} position={[pt.lat, pt.lon]}>
+                            <Popup>
+                                Point {index + 1}: {pt.lat.toFixed(4)}, {pt.lon.toFixed(4)}
+                            </Popup>
+                    </Marker>
+                    ))}
+
+                    {/* Polyline if 2 points are selected */}
+                    {geoPoints.length === 2 && (
+                    <Polyline
+                        key={geoPoints.map(pt => `${pt.lat},${pt.lon}`).join('-')}
+                        positions={[
+                            [geoPoints[0].lat, geoPoints[0].lon],
+                            [geoPoints[1].lat, geoPoints[1].lon]
+                        ]}
+                        pathOptions={{ color: '#1976d2', weight: 4 }}
+                    >
+                        {geoDistance !== null && (
+                        <Tooltip
+                            direction="center"
+                            permanent
+                            offset={[0, 0]}
+                            opacity={1}
+                            className="distance-tooltip"
+                        >
+                            <span style={{
+                                color: '#1976d2',
+                                fontWeight: 600,
+                                fontSize: '15px',
+                                background: 'none',
+                                border: 'none',
+                                boxShadow: 'none',
+                                padding: 0
+                            }}>
+                                {geoDistance.toFixed(2)} km
+                            </span>
+                        </Tooltip>
+                        )}
+                    </Polyline>
+                    )}
+
                 </MapContainer>
                 {panelSize === 'closed' && (
                     <button