Using Ionic components.

src/components/map/get-location.tsx

@@ -6,7 +6,8 @@ import { useDispatch } from 'react-redux';
 import { mapActions } from '../../store/map';
 
 import '../../theme/get-location.css';
-import location from '../../theme/icons/gps-location-svgrepo-com.svg';
+import { IonButton, IonIcon } from '@ionic/react';
+import { locateOutline } from 'ionicons/icons';
 
 const GetLocation: React.FC<{}> = () => {
   const dispatch = useDispatch();
@@ -32,7 +33,11 @@ const GetLocation: React.FC<{}> = () => {
     });
   };
 
-  return <input className='get-position' type='image' src={location} onClick={onClickHandler} />;
+  return (
+    <IonButton onClick={onClickHandler} className='get-location' shape='round' size='small' fill='solid'>
+      <IonIcon slot='icon-only' icon={locateOutline} color='white' />
+    </IonButton>
+  );
 };
 
 export default GetLocation;

src/components/map/map.tsx

@@ -1,4 +1,4 @@
-import react, { useMemo, useEffect, Fragment } from 'react';
+import react, { useMemo, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { mapActions } from '../../store/map';
 import _ from 'lodash';
@@ -9,6 +9,13 @@ import TiledMap from './tiled-map';
 import GetLocation from './get-location';
 import Whiteboard from './whiteboard';
 import CurrentLocation from './current-location';
+import {
+  IonApp,
+  IonButtons,
+  IonContent,
+  IonFooter,
+  IonToolbar,
+} from '@ionic/react';
 
 const Map: react.FC<{}> = (props: {}) => {
   const dispatch = useDispatch();
@@ -27,17 +34,27 @@ const Map: react.FC<{}> = (props: {}) => {
   }, []);
 
   return (
-    <Fragment>
-      <Slippy>
-        <GetLocation />
-        <Whiteboard>
-          <CurrentLocation />
-        </Whiteboard>
-      </Slippy>
-      <Layer>
-        <TiledMap />
-      </Layer>
-    </Fragment>
+    <>
+      <IonContent fullscreen={true}>
+        <IonApp>
+          <Slippy>
+            <Whiteboard>
+              <CurrentLocation />
+            </Whiteboard>
+          </Slippy>
+          <Layer>
+            <TiledMap />
+          </Layer>
+        </IonApp>
+      </IonContent>
+      <IonFooter className='ion-no-border'>
+        <IonToolbar>
+          <IonButtons>
+            <GetLocation />
+          </IonButtons>
+        </IonToolbar>
+      </IonFooter>
+    </>
   );
 };
 

src/theme/map.css

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

src/theme/slippy.css

@@ -1,5 +1,5 @@
 .slippy {
-  position: relative;
+  position: fixed;
   width: 100%;
   height: 100%;
   z-index: 10;

src/theme/variables.css

@@ -1,8 +1,15 @@
 /* Ionic Variables and Theming. For more info, please see:
 http://ionicframework.com/docs/theming/ */
 
+#background-content {
+  background: transparent;
+}
+
 /** Ionic CSS Variables **/
 :root {
+  --ion-background-color: transparent;
+
+
   /** primary **/
   --ion-color-primary: #3880ff;
   --ion-color-primary-rgb: 56, 128, 255;