aboutsummaryrefslogtreecommitdiff
path: root/modern/src/map/main/MapAccuracy.js
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/map/main/MapAccuracy.js')
-rw-r--r--modern/src/map/main/MapAccuracy.js55
1 files changed, 55 insertions, 0 deletions
diff --git a/modern/src/map/main/MapAccuracy.js b/modern/src/map/main/MapAccuracy.js
new file mode 100644
index 00000000..11ea64ed
--- /dev/null
+++ b/modern/src/map/main/MapAccuracy.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 MapAccuracy = () => {
+ 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 MapAccuracy;