aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-11-01 10:13:02 -0800
committerAnton Tananaev <anton.tananaev@gmail.com>2020-11-01 10:13:02 -0800
commitfd5f383530a025eb40793cdf00a6f6b20639bd77 (patch)
treeddee4339921928a730865bac60c0b5e906aea008
parentf5960bacc081068532fa7a3c899a0b3349b0c2f8 (diff)
downloadtrackermap-web-fd5f383530a025eb40793cdf00a6f6b20639bd77.tar.gz
trackermap-web-fd5f383530a025eb40793cdf00a6f6b20639bd77.tar.bz2
trackermap-web-fd5f383530a025eb40793cdf00a6f6b20639bd77.zip
Display position accuracy
-rw-r--r--modern/package.json1
-rw-r--r--modern/src/MainPage.js2
-rw-r--r--modern/src/map/AccuracyMap.js53
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;