diff --git a/src/components/map/gpx-import.tsx b/src/components/map/gpx-import.tsx
new file mode 100644
index 0000000..ea7792a
--- /dev/null
+++ b/src/components/map/gpx-import.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { Geolocation } from '@awesome-cordova-plugins/geolocation';
+import { useDispatch } from 'react-redux';
+
+import { mapActions } from '../../store/map';
+
+import '../../theme/get-location.css';
+import { IonIcon, IonItem } from '@ionic/react';
+import { downloadSharp } from 'ionicons/icons';
+
+const GpxImport: React.FC<{}> = () => {
+ const dispatch = useDispatch();
+
+ const onChangeHandler = (event: any) => {
+ console.log('On change handler');
+ const file = event.target.files[0];
+ const fileReader = new FileReader();
+ fileReader.readAsText(file);
+
+ fileReader.addEventListener(
+ 'load',
+ () => {
+ // this will then display a text file
+ console.log(fileReader.result);
+ },
+ false
+ );
+ };
+
+ return (
+
+
+
+
+ );
+};
+
+export default GpxImport;
diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
index 9e1cf06..59d3abf 100644
--- a/src/components/map/map.tsx
+++ b/src/components/map/map.tsx
@@ -14,9 +14,12 @@ import {
IonButtons,
IonContent,
IonFooter,
+ IonHeader,
IonToolbar,
} from '@ionic/react';
+import GpxImport from './gpx-import';
+
const Map: react.FC<{}> = (props: {}) => {
const dispatch = useDispatch();
@@ -47,6 +50,13 @@ const Map: react.FC<{}> = (props: {}) => {
+
+
+
+
+
+
+
diff --git a/src/theme/map.css b/src/theme/map.css
index 802ff3b..74e4aa5 100644
--- a/src/theme/map.css
+++ b/src/theme/map.css
@@ -12,3 +12,12 @@ ion-button.get-location {
--ion-background-color: white;
margin-left: calc(50% - 20px);
}
+
+.input-file {
+ width: 0.1px;
+ height: 0.1px;
+ opacity: 0;
+ overflow: hidden;
+ position: absolute;
+ z-index: -1;
+}
\ No newline at end of file
diff --git a/trapeze.config.yaml b/trapeze.config.yaml
index 276921c..5cc75d1 100644
--- a/trapeze.config.yaml
+++ b/trapeze.config.yaml
@@ -12,3 +12,4 @@ platforms:
+