Re-implementing GetLocation

AndroidManifest.xml

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.dyomedea.solid">
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+
+        <activity
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
+            android:name="com.example.app.MainActivity"
+            android:label="@string/title_activity_main"
+            android:theme="@style/AppTheme.NoActionBarLaunch"
+            android:launchMode="singleTask"
+            android:exported="true">
+            
+
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+
+        </activity>
+
+        <provider
+            android:name="androidx.core.content.FileProvider"
+            android:authorities="${applicationId}.fileprovider"
+            android:exported="false"
+            android:grantUriPermissions="true">
+            <meta-data
+                android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/file_paths"></meta-data>
+        </provider>
+    </application>
+
+    <!-- Permissions -->
+
+    <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" />
+</manifest>

package-lock.json

@@ -10,10 +10,13 @@
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
+        "@awesome-cordova-plugins/geolocation": "^6.2.0",
         "@capacitor/android": "^3.4.3",
         "@capacitor/core": "^3.4.3",
         "@capacitor/ios": "^3.4.3",
         "@solidjs/router": "^0.5.1",
+        "@suid/icons-material": "^0.5.1",
+        "@suid/material": "^0.8.0",
         "ol": "^7.1.0",
         "solid-js": "^1.3.12"
       },
@@ -47,6 +50,30 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@awesome-cordova-plugins/core": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@awesome-cordova-plugins/core/-/core-6.2.0.tgz",
+      "integrity": "sha512-z5rKlTuQpLLPEIgzOmomQdoiRw5Sal2blh5CJRcjqh8ktspefbNC81Ni0MykPdV78/UlRORTHEzxugpcEcl1RQ==",
+      "peer": true,
+      "dependencies": {
+        "@types/cordova": "latest"
+      },
+      "peerDependencies": {
+        "rxjs": "^5.5.0 || ^6.5.0 || ^7.3.0"
+      }
+    },
+    "node_modules/@awesome-cordova-plugins/geolocation": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@awesome-cordova-plugins/geolocation/-/geolocation-6.2.0.tgz",
+      "integrity": "sha512-EGUwTOrH4GjFHH4Zt0pzExg2TasJqQdYDcV4qpW8lY41fJBEFJCAB8KmSsD60hi25S5DxHQSJjsTuGBq2bq6DA==",
+      "dependencies": {
+        "@types/cordova": "latest"
+      },
+      "peerDependencies": {
+        "@awesome-cordova-plugins/core": "^6.0.1",
+        "rxjs": "^5.5.0 || ^6.5.0 || ^7.3.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
@@ -955,6 +982,15 @@
       "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.6.6.tgz",
       "integrity": "sha512-3MUulwMtsdCA9lw8a/Kc0XDBJJVCkYTQ5aGd+///TbfkOMXoOGAzzoiYKwPEsLYZv7He7fKJ/mCacqKOO7REyg=="
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.24.51",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
@@ -969,6 +1005,104 @@
         "solid-js": "^1.5.3"
       }
     },
+    "node_modules/@suid/base": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@suid/base/-/base-0.5.0.tgz",
+      "integrity": "sha512-N7qW1pYu3IA3NhqJqixD5v5w9YA1RmNvmPa+PLmcOLFZ/dnYr6r/ZRL9IrhMpEWllx0iJIlgMgNNXdtHV4H+Rg==",
+      "dependencies": {
+        "@popperjs/core": "^2.11.6",
+        "@suid/css": "0.1.7",
+        "@suid/system": "0.7.0",
+        "@suid/types": "0.3.0",
+        "@suid/utils": "0.6.0",
+        "clsx": "^1.2.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.2"
+      }
+    },
+    "node_modules/@suid/css": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/@suid/css/-/css-0.1.7.tgz",
+      "integrity": "sha512-SBRGHwBndin52tgLAyVlu0cNcDeBJVYA0E4cfo7TO0Jmicmn3xgWXG8Ie7kSDnS8tSf9IZuVnXHaq9deZfdvdA==",
+      "dependencies": {
+        "@suid/utils": "0.6.0"
+      }
+    },
+    "node_modules/@suid/icons-material": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@suid/icons-material/-/icons-material-0.5.1.tgz",
+      "integrity": "sha512-TINLZjcE7OOrnNHA5KkUYbSHMlbmSccB9XgGDWAKEpcuqCNrlzYcK7URRSO/2fp+pg07tjuQOqO1NKA1b4pp/g==",
+      "dependencies": {
+        "@suid/material": "0.8.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.2"
+      }
+    },
+    "node_modules/@suid/material": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@suid/material/-/material-0.8.0.tgz",
+      "integrity": "sha512-eXGv3Qmq3m3huiG1xZ/rZsbnSVCiq/5+pU/tG365a+ehQnFVz2Pm7kT0kYs9lQcISdKo8Atbn+a7BFBidL2RWw==",
+      "dependencies": {
+        "@suid/base": "0.5.0",
+        "@suid/css": "0.1.7",
+        "@suid/system": "0.7.0",
+        "@suid/types": "0.3.0",
+        "@suid/utils": "0.6.0",
+        "clsx": "^1.2.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.2"
+      }
+    },
+    "node_modules/@suid/styled-engine": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@suid/styled-engine/-/styled-engine-0.3.0.tgz",
+      "integrity": "sha512-TGpmRizJzDoBHcKPR5MUmK5v3Jkfx4mkVGxskEeGXUoMHSIkDWiNstEmYlLFOKqT2Ku2t0lJ8fOS4K777+dUiA==",
+      "dependencies": {
+        "@suid/css": "0.1.7",
+        "@suid/utils": "0.6.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.2"
+      }
+    },
+    "node_modules/@suid/system": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@suid/system/-/system-0.7.0.tgz",
+      "integrity": "sha512-fa7wY3WMiARQYA2ODpCIr5BQ7kuXBciKuKLgQ5wuorKQpwQh9GfEnl9xgRFEb2mpM5Z7Y+PyrKaPygh3o5faWA==",
+      "dependencies": {
+        "@suid/css": "0.1.7",
+        "@suid/styled-engine": "0.3.0",
+        "@suid/types": "0.3.0",
+        "@suid/utils": "0.6.0",
+        "clsx": "^1.2.1",
+        "csstype": "^3.1.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.2"
+      }
+    },
+    "node_modules/@suid/types": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@suid/types/-/types-0.3.0.tgz",
+      "integrity": "sha512-MrfSnnI8oyPy+TtSIG6qVZyqVN7GMH49uRbw8ACLEek2T1keG2NtLNgNWhiWv51bP0CwBAalwt+QGcN4b/3OSw==",
+      "peerDependencies": {
+        "solid-js": "^1.6.2"
+      }
+    },
+    "node_modules/@suid/utils": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@suid/utils/-/utils-0.6.0.tgz",
+      "integrity": "sha512-1s5mRYbYCFzzo/t1tCvP72IizDNMjAIsV7SsBHqAQRayfQIlAaQv9D2HAQ0QW2WxHIQTsi4JLPZI/0MdiU12Vw==",
+      "dependencies": {
+        "@suid/types": "0.3.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.2"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "8.19.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.0.tgz",
@@ -1088,6 +1222,11 @@
         "@types/chai": "*"
       }
     },
+    "node_modules/@types/cordova": {
+      "version": "0.0.34",
+      "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
+      "integrity": "sha512-rkiiTuf/z2wTd4RxFOb+clE7PF4AEJU0hsczbUdkHHBtkUmpWQpEddynNfJYKYtZFJKbq4F+brfekt1kx85IZA=="
+    },
     "node_modules/@types/fs-extra": {
       "version": "8.1.2",
       "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.1.2.tgz",
@@ -1516,6 +1655,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3792,6 +3939,15 @@
       "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
       "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
     },
+    "node_modules/rxjs": {
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.7.tgz",
+      "integrity": "sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",

package.json

@@ -23,10 +23,13 @@
     "vitest": ">0.6.0"
   },
   "dependencies": {
+    "@awesome-cordova-plugins/geolocation": "^6.2.0",
     "@capacitor/android": "^3.4.3",
     "@capacitor/core": "^3.4.3",
     "@capacitor/ios": "^3.4.3",
     "@solidjs/router": "^0.5.1",
+    "@suid/icons-material": "^0.5.1",
+    "@suid/material": "^0.8.0",
     "ol": "^7.1.0",
     "solid-js": "^1.3.12"
   }

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';

src/components/map/Map.tsx

@@ -21,25 +21,42 @@ import { useGeographic as olUseGeographic } from 'ol/proj';
 import 'ol/ol.css';
 import './Map.css';
 import { Collection } from 'ol';
+import GetLocation from '../get-location';
+
+const [getState, setState] = createSignal({
+  lon: 0,
+  lat: 0,
+  rotation: 0,
+  zoom: 0,
+});
+
+export { getState };
 
 const Map: Component = () => {
   const [getMap, setMap] = createSignal<OlMap | null>(null);
   const params = useParams();
-  const [state, setState] = createSignal(params);
+  const navigate = useNavigate();
+
+  let target: HTMLDivElement;
+  console.log({ caller: 'Map', center: params.center });
+
+
   createEffect(() => {
-    setState(params);
+    setState({
+      lon: +params.lon,
+      lat: +params.lat,
+      rotation: +params.rotation,
+      zoom: +params.zoom,
+    });
     const map = getMap();
     const view = map?.getView();
     view?.animate({
-      center: [+state().lon, +state().lat],
+      center: [getState().lon, getState().lat],
-      rotation: +state().rotation,
+      rotation: getState().rotation,
-      zoom: +state().zoom,
+      zoom: getState().zoom,
       duration: 1000,
     });
   });
-  const navigate = useNavigate();
-  let target: HTMLDivElement;
-  console.log({ caller: 'Map', center: params.center });
 
   onMount(() => {
     olUseGeographic();
@@ -63,17 +80,11 @@ const Map: Component = () => {
       });
     };
 
-    const controls = new Collection([
-      new Attribution({ collapsible: true }),
-      new Rotate(),
-      new ScaleLine({ bar: true }),
-      //      new Control({ element: getLocation.current ?? undefined }),
-    ]);
     const olMap = new OlMap({
       view: new View({
-        center: [+state().lon, +state().lat],
+        center: [+getState().lon, +getState().lat],
-        zoom: +state().zoom,
+        zoom: +getState().zoom,
-        rotation: +state().rotation,
+        rotation: +getState().rotation,
       }),
       layers: [
         new TileLayer({
@@ -82,9 +93,23 @@ const Map: Component = () => {
         //new VectorLayer({ source: newSource }),
       ],
       target: target,
-      controls,
+      controls: new Collection<Control>([
+        new Attribution({ collapsible: true }),
+        new Rotate(),
+        new ScaleLine({ bar: true }),
+        // @ts-ignore
+        new Control({
+          // @ts-ignore
+          element: (
+            <div>
+              <GetLocation />
+            </div>
+          ),
+        }),
+      ]),
     });
     olMap.on(['moveend'], changeListener);
+
     setMap(olMap);
   });
 

src/components/map/index.tsx

@@ -1 +1 @@
-export { default } from './Map';
+export { default, getState } from './Map';