Also moving the map center to the newest location when recording tracks (must think more carefully of somethin better for #12).

src/components/map/GpxRecord.tsx

@@ -31,13 +31,11 @@ import { SettingsState } from '../../store/settings';
 
 import i18n, { setI18nLanguage } from '../../i18n/index';
 
-
 declare global {
   var $lastValidLocationTime: number;
 }
 
 const GpxRecord: React.FC<{}> = () => {
-
   const language = useSelector(
     (state: { settings: SettingsState }) => state.settings.language
   );
@@ -106,6 +104,12 @@ const GpxRecord: React.FC<{}> = () => {
           lon: location.longitude,
         })
       );
+      dispatch(
+        mapActions.setCenter({
+          lat: location.latitude,
+          lon: location.longitude,
+        })
+      );
     }
   };
 
@@ -182,7 +186,8 @@ const GpxRecord: React.FC<{}> = () => {
               size='large'
               onClick={pauseRecording}
             >
-              <IonIcon slot='start' icon={pauseCircle}></IonIcon>{i18n.pauseRecording}
+              <IonIcon slot='start' icon={pauseCircle}></IonIcon>
+              {i18n.pauseRecording}
             </IonButton>
           )}
           {hasCurrentTrack && (
@@ -193,7 +198,8 @@ const GpxRecord: React.FC<{}> = () => {
                 size='large'
                 onClick={stopRecording}
               >
-                <IonIcon slot='start' icon={stop}></IonIcon>{i18n.stopRecording}
+                <IonIcon slot='start' icon={stop}></IonIcon>
+                {i18n.stopRecording}
               </IonButton>
               <IonButton
                 expand='block'
@@ -201,7 +207,8 @@ const GpxRecord: React.FC<{}> = () => {
                 size='large'
                 onClick={deleteRecording}
               >
-                <IonIcon slot='start' icon={closeCircle}></IonIcon>{i18n.cancelRecording}
+                <IonIcon slot='start' icon={closeCircle}></IonIcon>
+                {i18n.cancelRecording}
               </IonButton>
             </>
           )}