Filter position accuracy (fix #1014)

2 files changed, 9 insertions, 11 deletions

diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index a09d9f87..bcd62c7d 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -231,7 +231,7 @@ const MainPage = () => {
       <MapView>
         <MapOverlay />
         {mapGeofences && <MapGeofence />}
-        <MapAccuracy />
+        <MapAccuracy positions={filteredPositions} />
         {mapLiveRoutes && <MapLiveRoutes />}
         <MapPositions positions={filteredPositions} onClick={onClick} showStatus />
         {selectedPosition && selectedPosition.course && (
diff --git a/modern/src/map/main/MapAccuracy.js b/modern/src/map/main/MapAccuracy.js
index bec8bde8..335be58e 100644
--- a/modern/src/map/main/MapAccuracy.js
+++ b/modern/src/map/main/MapAccuracy.js
@@ -1,21 +1,13 @@
 import { useId, useEffect } from 'react';
-import { useSelector } from 'react-redux';
 import circle from '@turf/circle';
 import { useTheme } from '@mui/styles';
 import { map } from '../core/MapView';
 
-const MapAccuracy = () => {
+const MapAccuracy = ({ positions }) => {
   const id = useId();
 
   const theme = useTheme();
 
-  const positions = useSelector((state) => ({
-    type: 'FeatureCollection',
-    features: Object.values(state.positions.items)
-      .filter((position) => position.accuracy > 0)
-      .map((position) => circle([position.longitude, position.latitude], position.accuracy * 0.001)),
-  }));
-
   useEffect(() => {
     map.addSource(id, {
       type: 'geojson',
@@ -50,7 +42,13 @@ const MapAccuracy = () => {
   }, []);
 
   useEffect(() => {
-    map.getSource(id).setData(positions);
+    const data = {
+      type: 'FeatureCollection',
+      features: positions
+        .filter((position) => position.accuracy > 0)
+        .map((position) => circle([position.longitude, position.latitude], position.accuracy * 0.001)),
+    };
+    map.getSource(id).setData(data);
   }, [positions]);
 
   return null;