diff --git a/package.json b/package.json
index af4bb57..3a191c7 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.tsx b/src/App.tsx
index e3c7459..d5be32c 100644
--- a/src/App.tsx
+++ b/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 (
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/components/map/GetLocation.css b/src/components/map/GetLocation.css
new file mode 100644
index 0000000..22d4564
--- /dev/null
+++ b/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);
+}
+
diff --git a/src/components/map/GetLocation.tsx b/src/components/map/GetLocation.tsx
new file mode 100644
index 0000000..599617f
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
+export default GetLocation;
diff --git a/src/theme/variables.css b/src/theme/variables.css
index a44fcdd..3f40381 100644
--- a/src/theme/variables.css
+++ b/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;
diff --git a/trapeze.config.yaml b/trapeze.config.yaml
new file mode 100644
index 0000000..eda5528
--- /dev/null
+++ b/trapeze.config.yaml
@@ -0,0 +1,16 @@
+platforms:
+ android:
+ manifest:
+ - file: AndroidManifest.xml
+ target: manifest
+ delete: //uses-permission
+ - file: AndroidManifest.xml
+ target: manifest
+ inject: |
+
+
+
+
+
+
+