Add current location

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 />}>