1 files changed, 55 insertions, 0 deletions
diff --git a/modern/src/map/main/AccuracyMap.js b/modern/src/map/main/AccuracyMap.js
new file mode 100644
index 00000000..870df38f
--- /dev/null
+++ b/modern/src/map/main/AccuracyMap.js
@@ -0,0 +1,55 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import circle from '@turf/circle';
+
+import { map } from '../core/Map';
+
+const AccuracyMap = () => {
+  const id = 'accuracy';
+
+  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',
+      data: {
+        type: 'FeatureCollection',
+        features: [],
+      },
+    });
+    map.addLayer({
+      source: id,
+      id,
+      type: 'fill',
+      filter: [
+        'all',
+        ['==', '$type', 'Polygon'],
+      ],
+      paint: {
+        'fill-color': '#3bb2d0',
+        'fill-outline-color': '#3bb2d0',
+        'fill-opacity': 0.25,
+      },
+    });
+
+    return () => {
+      if (map.getLayer(id)) {
+        map.removeLayer(id);
+      }
+      if (map.getSource(id)) {
+        map.removeSource(id);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    map.getSource(id).setData(positions);
+  }, [positions]);
+
+  return null;
+};
+
+export default AccuracyMap;