diff options
| -rw-r--r-- | modern/src/MainPage.js | 2 | ||||
| -rw-r--r-- | modern/src/map/CurrentLocationMap.js | 21 | ||||
| -rw-r--r-- | modern/src/reports/ReplayPage.js | 27 |
3 files changed, 37 insertions, 13 deletions
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index a5a80618..b6b5044c 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -9,6 +9,7 @@ import SelectedDeviceMap from './map/SelectedDeviceMap'; import AccuracyMap from './map/AccuracyMap'; import GeofenceMap from './map/GeofenceMap'; import CurrentPositionsMap from './map/CurrentPositionsMap'; +import CurrentLocationMap from './map/CurrentLocationMap'; const useStyles = makeStyles(theme => ({ root: { @@ -55,6 +56,7 @@ const MainPage = ({ width }) => { <div className={classes.mapContainer}> <ContainerDimensions> <Map> + <CurrentLocationMap /> <GeofenceMap /> <AccuracyMap /> <CurrentPositionsMap /> diff --git a/modern/src/map/CurrentLocationMap.js b/modern/src/map/CurrentLocationMap.js new file mode 100644 index 00000000..31e6e285 --- /dev/null +++ b/modern/src/map/CurrentLocationMap.js @@ -0,0 +1,21 @@ +import mapboxgl from 'mapbox-gl'; +import { useEffect } from 'react'; +import { map } from './Map'; + +const CurrentLocationMap = () => { + useEffect(() => { + const control = new mapboxgl.GeolocateControl({ + positionOptions: { + enableHighAccuracy: true, + timeout: 5000, + }, + trackUserLocation: true, + }); + map.addControl(control); + return () => map.removeControl(control); + }, []); + + return null; +} + +export default CurrentLocationMap; diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js index 2afa1a2f..6b84d4d9 100644 --- a/modern/src/reports/ReplayPage.js +++ b/modern/src/reports/ReplayPage.js @@ -76,19 +76,20 @@ const ReplayPage = () => { } </Map> <Container maxWidth="sm" className={classes.controlPanel}> - <Paper className={classes.controlContent}> - <Slider - disabled={!positions.length} - max={positions.length - 1} - step={null} - marks={positions.map((_, index) => ({ value: index }))} - value={index} - onChange={(_, index) => setIndex(index)} - valueLabelDisplay="auto" - valueLabelFormat={i => i < positions.length ? formatPosition(positions[i], 'fixTime') : ''} - ValueLabelComponent={TimeLabel} - /> - </Paper> + {!!positions.length && + <Paper className={classes.controlContent}> + <Slider + max={positions.length - 1} + step={null} + marks={positions.map((_, index) => ({ value: index }))} + value={index} + onChange={(_, index) => setIndex(index)} + valueLabelDisplay="auto" + valueLabelFormat={i => i < positions.length ? formatPosition(positions[i], 'fixTime') : ''} + ValueLabelComponent={TimeLabel} + /> + </Paper> + } <div> <Accordion expanded={expanded} onChange={() => setExpanded(!expanded)}> <AccordionSummary expandIcon={<ExpandMoreIcon />}> |