Re-implementing GetLocation

src/components/get-location/GetLocation.module.css

@@ -0,0 +1,7 @@
+.getLocation {
+  --opacity: 0.6;
+  --ion-background-color: white;
+  margin-left: calc(50% - 20px) !important;
+  position: fixed !important;
+  bottom: 6px;
+}

src/components/get-location/GetLocation.tsx

@@ -0,0 +1,33 @@
+//import React from 'react';
+import { Component } from 'solid-js';
+import { useNavigate } from '@solidjs/router';
+import { Geolocation } from '@awesome-cordova-plugins/geolocation';
+
+import style from './GetLocation.module.css';
+import LocationSearchingIcon from '@suid/icons-material/LocationSearching';
+import { IconButton } from '@suid/material';
+import { getState } from '../map';
+
+const GetLocation: Component = () => {
+  const navigate = useNavigate();
+
+  const onClickHandler = (event: any) => {
+    console.log('Click handler');
+    Geolocation.getCurrentPosition().then((position) => {
+      console.log({ caller: 'GetLocation/onClickHandler', position });
+      const state = getState();
+      navigate(
+        `/map/${position.coords.longitude}/${position.coords.latitude}/${state.zoom}/${state.rotation}`
+      );
+    });
+  };
+
+  //
+  return (
+    <IconButton class={style.getLocation} onClick={onClickHandler}>
+      <LocationSearchingIcon />
+    </IconButton>
+  );
+};
+
+export default GetLocation;

src/components/get-location/index.ts

@@ -0,0 +1 @@
+export { default } from './GetLocation';