aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--modern/src/MainPage.js2
-rw-r--r--modern/src/map/CurrentLocationMap.js21
-rw-r--r--modern/src/reports/ReplayPage.js27
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 />}>