Re-implementing (foreground) geolocation (and npm packages update).

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
+    "@awesome-cordova-plugins/geolocation": "^6.1.0",
     "@capacitor/android": "4.3.0",
     "@capacitor/app": "4.0.1",
     "@capacitor/core": "4.3.0",

src/App.tsx

@@ -1,5 +1,14 @@
 import { Redirect, Route } from 'react-router-dom';
-import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
+import {
+  IonApp,
+  IonButtons,
+  IonContent,
+  IonFooter,
+  IonHeader,
+  IonRouterOutlet,
+  IonToolbar,
+  setupIonicReact,
+} from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
 
 /* Core CSS required for Ionic components to work properly */
@@ -22,10 +31,12 @@ import '@ionic/react/css/display.css';
 import './theme/variables.css';
 import LiveMap from './components/map/LiveMap';
 
-import { useAtom } from 'jotai';
+import { atom, useAtom } from 'jotai';
 import { atomWithHash } from 'jotai/utils';
 import { MapScope } from './components/map/types';
 import { debounce } from 'lodash';
+import GetLocation from './components/map/GetLocation';
+import { geoPoint } from './components/map/types';
 
 setupIonicReact();
 
@@ -36,6 +47,14 @@ const initialScope: MapScope = {
 };
 const scopeAtom = atomWithHash('scope', initialScope);
 
+export const setCenterAtom = atom(null, (get, set, center: geoPoint) => {
+  const previousScope = get(scopeAtom);
+  const newScope: MapScope = {
+    ...previousScope,
+    center: center,
+  };
+  set(scopeAtom, newScope);
+});
 /**
  *
  * @returns The root app component
@@ -46,20 +65,27 @@ const App: React.FC = () => {
   console.log(`App, scope: ${JSON.stringify(scope)}`);
   return (
     <IonApp>
-      <IonReactRouter>
-        <IonRouterOutlet>
-          <Route exact path='/home'>
-            <LiveMap
-              scope={scope}
-              setScope={debounce(setScope, 1000)}
-              numberOfTiledLayers={5}
-            />
-          </Route>
-          <Route exact path='/'>
-            <Redirect to='/home' />
-          </Route>
-        </IonRouterOutlet>
-      </IonReactRouter>
+      <IonContent fullscreen={true}>
+        <IonApp>
+          <LiveMap
+            scope={scope}
+            setScope={debounce(setScope, 1000)}
+            numberOfTiledLayers={5}
+          />
+        </IonApp>
+      </IonContent>
+      <IonHeader className='ion-no-border' translucent={true}>
+        <IonToolbar>
+          <IonButtons slot='end'></IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonFooter className='ion-no-border'>
+        <IonToolbar>
+          <IonButtons>
+            <GetLocation />
+          </IonButtons>
+        </IonToolbar>
+      </IonFooter>
     </IonApp>
   );
 };

src/components/map/GetLocation.css

@@ -0,0 +1,6 @@
+ion-button.get-location {
+  --opacity: 0.6;
+  --ion-background-color: white;
+  margin-left: calc(50% - 20px);
+}
+

src/components/map/GetLocation.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { Geolocation } from '@awesome-cordova-plugins/geolocation';
+
+import './GetLocation.css';
+import { IonButton, IonIcon } from '@ionic/react';
+import { locateOutline } from 'ionicons/icons';
+import { useAtom } from 'jotai';
+import { setCenterAtom } from '../../App';
+
+const GetLocation: React.FC<{}> = () => {
+  const [, setCenter] = useAtom(setCenterAtom);
+
+  const onClickHandler = (event: any) => {
+    console.log('Click handler');
+    Geolocation.getCurrentPosition().then((position) => {
+      console.log(
+        `Click handler, position: ${position.coords.latitude}, ${position.coords.longitude}`
+      );
+      setCenter({
+        lat: position.coords.latitude,
+        lon: position.coords.longitude,
+      });
+    });
+  };
+
+  return (
+    <IonButton
+      onClick={onClickHandler}
+      className='get-location get-position'
+      shape='round'
+      size='small'
+      fill='solid'
+    >
+      <IonIcon slot='icon-only' icon={locateOutline} color='white' />
+    </IonButton>
+  );
+};
+
+export default GetLocation;

src/theme/variables.css

@@ -1,8 +1,14 @@
 /* Ionic Variables and Theming. For more info, please see:
 http://ionicframework.com/docs/theming/ */
 
+
 /** Ionic CSS Variables **/
 :root {
+
+  /** Transparent background so that underlying tiles and whiteboard can be seen **/
+  --ion-background-color: transparent;
+
+
   /** primary **/
   --ion-color-primary: #3880ff;
   --ion-color-primary-rgb: 56, 128, 255;

trapeze.config.yaml

@@ -0,0 +1,16 @@
+platforms:
+  android:
+    manifest:
+      - file: AndroidManifest.xml
+        target: manifest
+        delete: //uses-permission
+      - file: AndroidManifest.xml
+        target: manifest
+        inject: |
+          <uses-permission android:name="android.permission.INTERNET" />
+          <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+          <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+          <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />          
+          <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
+          <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+          <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />