Cherry picking 57d17a1fa6 (Requesting a wake lock so that the screen is not dimmed while using the app.)

src/App.tsx

@@ -40,6 +40,34 @@ import CurrentLocation from './components/map/CurrentLocation';
 
 setupIonicReact();
 
+// See https://stackoverflow.com/questions/71538643/property-wakelock-does-not-exist-on-type-navigator
+const requestWakeLock = async () => {
+  const anyNav: any = navigator;
+  if ('wakeLock' in navigator) {
+    try {
+      const wakeLock = await anyNav['wakeLock'].request('screen');
+    } catch (err: any) {
+      // The wake lock request fails - usually system-related, such as low battery.
+      console.log(`Wake lock request failed: ${err.name}, ${err.message}`);
+    }
+  } else {
+    console.log('No wake lock support here...');
+  }
+};
+
+const handleVisibilityChange = () => {
+  if (document.hidden) {
+    console.log('Application hidden');
+  } else {
+    console.log('Application visible');
+    requestWakeLock();
+  }
+};
+
+// See https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
+document.addEventListener('visibilitychange', handleVisibilityChange, false);
+requestWakeLock();
+
 const initialScope: MapScope = {
   center: { lat: -37.8403508, lon: 77.5539501 },
   zoom: 13,
@@ -71,7 +99,7 @@ const App: React.FC = () => {
             scope={scope}
             setScope={debounce(setScope, 1000)}
             numberOfTiledLayers={5}
-            markers={[<CurrentLocation key='currentLocation'/>]}
+            markers={[<CurrentLocation key='currentLocation' />]}
           />
         </IonApp>
       </IonContent>