diff options
| -rw-r--r-- | modern/package.json | 1 | ||||
| -rw-r--r-- | modern/src/MainPage.js | 2 | ||||
| -rw-r--r-- | modern/src/map/AccuracyMap.js | 53 |
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; |