diff --git a/client/src/pages/MapView.jsx b/client/src/pages/MapView.jsx
index 6752a95..fd0183f 100644
--- a/client/src/pages/MapView.jsx
+++ b/client/src/pages/MapView.jsx
@@ -419,6 +419,10 @@ const MapView = () => {
 
                 return detections.map((detection, droneIndex) => {
                   console.log('MapView: Rendering ring for detection:', detection, 'droneIndex:', droneIndex, 'totalDrones:', detections.length, 'detector device:', detectorDevice);
+                  
+                  // Calculate values first
+                  const totalDrones = detections.length;
+                  
                   const opacity = getDetectionOpacity(detection);
                   const age = getDetectionAge(detection);
                   console.log('MapView: Detection age:', age, 'opacity:', opacity);
@@ -493,7 +497,6 @@ const MapView = () => {
                     ];
                   };
 
-                  const totalDrones = detections.length;
                   const dashPattern = getDashPattern(detection.drone_type, droneIndex, totalDrones);
                   const [latOffset, lonOffset] = getPositionOffset(droneIndex, totalDrones);