feat: center map and dynamic radius

src/components/BreadCrumbTrail.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import { Polyline, Marker, Popup } from 'react-leaflet';
+import React, { useState, useEffect, useRef } from 'react';
+import { Circle, Polyline, useMap } from 'react-leaflet';
 import { useROS } from '@/ros/ROSContext';
 import { useWaypoints } from '@/contexts/WaypointContext';
 import ROSLIB from 'roslib';
@@ -10,14 +10,18 @@ import L from 'leaflet'
 interface Breadcrumb {
   coordinate: [number, number];
   timestamp: number;
+  covarianceRadius: number;
+  altitude?: number;
 }
 
 const BreadcrumbTrail: React.FC = () => {
+  const map = useMap();
   const { ros, connectionStatus } = useROS();
   const { addWaypoint } = useWaypoints();
   const [breadcrumbs, setBreadcrumbs] = useState<Breadcrumb[]>([]);
   const [paused, setPaused] = useState<boolean>(false);
   const [lastFix, setLastFix] = useState<Breadcrumb | null>(null);
+  const hasRecenteredRef = useRef<boolean>(false);
 
   useEffect(() => {
     if (!ros) return;
@@ -30,21 +34,39 @@ const BreadcrumbTrail: React.FC = () => {
 
     const handleFix = (message: any) => {
       if (paused) return;
-      // Assuming the /fix message contains 'latitude' and 'longitude'
-      const { latitude, longitude } = message;
+
+      const { latitude, longitude, position_covariance } = message;
+
+      if (!Number.isFinite(latitude) || !Number.isFinite(longitude)) return;
+
+      const eastVariance = position_covariance?.[0] ?? 0;
+      const northVariance = position_covariance?.[4] ?? 0;
+
+      const covarianceRadius = 2 * Math.sqrt(
+        Math.max(eastVariance, northVariance, 0)
+      );
+
       const newFix: Breadcrumb = {
         coordinate: [latitude, longitude],
         timestamp: Date.now(),
+        covarianceRadius,
+        altitude: message.altitude,
       };
+
       setBreadcrumbs((prev) => [...prev, newFix]);
       setLastFix(newFix);
+
+      if (!hasRecenteredRef.current) {
+        map.flyTo(newFix.coordinate, map.getZoom());
+        hasRecenteredRef.current = true;
+      }
     };
 
     fixTopic.subscribe(handleFix);
     return () => {
       fixTopic.unsubscribe(handleFix);
     };
-  }, [ros, paused]);
+  }, [ros, paused, map]);
 
   const clearBreadcrumbs = () => {
     setBreadcrumbs([]);
@@ -87,6 +109,12 @@ const BreadcrumbTrail: React.FC = () => {
     }
   };
 
+  const handleRecenter = () => {
+    if (lastFix) {
+      map.flyTo(lastFix.coordinate, map.getZoom());
+    }
+  };
+
   return (
     <>
       {/* render the crumbs bomboclart*/}
@@ -96,6 +124,17 @@ const BreadcrumbTrail: React.FC = () => {
           color="yellow"
         />
       )}
+      {lastFix && lastFix.covarianceRadius > 0 && (
+        <Circle
+          center={lastFix.coordinate}
+          radius={lastFix.covarianceRadius}
+          pathOptions={{
+            color: 'red',
+            weight: 3,
+            fill: false,
+          }}
+        />
+      )}
 
       <div
         style={{
@@ -125,6 +164,10 @@ const BreadcrumbTrail: React.FC = () => {
             <br />
             Lon: {lastFix.coordinate[1].toFixed(6)}
             <br />
+            Altitude: {lastFix.altitude?.toFixed(2) || 'N/A'} m
+            <br />
+            Accuracy: {lastFix.covarianceRadius.toFixed(2)} m (2σ)
+            <br />
             Time: {new Date(lastFix.timestamp).toLocaleTimeString()}
           </div>
         ) : (
@@ -154,6 +197,7 @@ const BreadcrumbTrail: React.FC = () => {
           <button
             onClick={clearBreadcrumbs}
             style={{
+              marginRight: '0.5rem',
               padding: '0.25rem 0.5rem',
               backgroundColor: '#d9534f',
               border: 'none',
@@ -164,6 +208,20 @@ const BreadcrumbTrail: React.FC = () => {
           >
             Clear
           </button>
+          <button
+            onClick={handleRecenter}
+            disabled={!lastFix}
+            style={{
+              padding: '0.25rem 0.5rem',
+              backgroundColor: lastFix ? '#6c757d' : '#444',
+              border: 'none',
+              borderRadius: '4px',
+              color: '#fff',
+              cursor: lastFix ? 'pointer' : 'not-allowed',
+            }}
+          >
+            Re-center
+          </button>
         </div>
         {lastFix && (
           <button
@@ -185,5 +243,4 @@ const BreadcrumbTrail: React.FC = () => {
   );
 };
 
-export default BreadcrumbTrail;
-
+export default BreadcrumbTrail;

src/components/panels/MapView.tsx

@@ -169,5 +169,4 @@ const MapView: React.FC<MapViewProps> = ({offline}) => {
   );
 };
 
-export default MapView;
-
+export default MapView;