Display position accuracy

3 files changed, 56 insertions, 0 deletions

diff --git a/modern/package.json b/modern/package.json
index bd1dd33e..e5438b53 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -9,6 +9,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@reduxjs/toolkit": "^1.4.0",
+    "@turf/turf": "^5.1.6",
     "mapbox-gl": "^1.12.0",
     "moment": "^2.28.0",
     "ol": "^6.4.3",
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index adb86b25..d277f28a 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -9,6 +9,7 @@ import MainToolbar from './MainToolbar';
 import Map from './map/Map';
 import PositionsMap from './map/PositionsMap';
 import SelectedDeviceMap from './map/SelectedDeviceMap';
+import AccuracyMap from './map/AccuracyMap';
 import GeofenceMap from './map/GeofenceMap';
 
 const useStyles = makeStyles(theme => ({
@@ -58,6 +59,7 @@ const MainPage = ({ width }) => {
           <ContainerDimensions>
             <Map>
               <GeofenceMap />
+              <AccuracyMap />
               <PositionsMap />
               <SelectedDeviceMap />
             </Map>
diff --git a/modern/src/map/AccuracyMap.js b/modern/src/map/AccuracyMap.js
new file mode 100644
index 00000000..e81fc8fb
--- /dev/null
+++ b/modern/src/map/AccuracyMap.js
@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import circle from '@turf/circle';
+
+import { map } from './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': id,
+      'type': 'fill',
+      'filter': [
+         'all',
+         ['==', '$type', 'Polygon'],
+      ],
+      'paint': {
+         'fill-color':'#3bb2d0',
+         'fill-outline-color':'#3bb2d0',
+         'fill-opacity':0.25,
+      },
+    });
+
+    return () => {
+      map.removeLayer(id);
+      map.removeSource(id);
+    };
+  }, []);
+
+  useEffect(() => {
+    map.getSource(id).setData(positions);
+  }, [positions]);
+
+  return null;
+}
+
+export default AccuracyMap;