Re-implementing GetLocation

2022-11-25 21:09:59 +01:00 · 2022-11-25 21:09:59 +01:00 · 1efdc30e5c
parent ef8ee5e00e
commit 1efdc30e5c
8 changed files with 293 additions and 19 deletions
--- a/AndroidManifest.xml
+++ b/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>
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
  }
--- a/src/components/get-location/GetLocation.module.css
+++ b/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;
+}
--- a/src/components/get-location/GetLocation.tsx
+++ b/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;
--- a/src/components/get-location/index.ts
+++ b/src/components/get-location/index.ts
@ -0,0 +1 @@
+export { default } from './GetLocation';
--- a/src/components/map/Map.tsx
+++ b/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],
-      rotation: +state().rotation,
-      zoom: +state().zoom,
+      center: [getState().lon, getState().lat],
+      rotation: getState().rotation,
+      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],
-        zoom: +state().zoom,
-        rotation: +state().rotation,
+        center: [+getState().lon, +getState().lat],
+        zoom: +getState().zoom,
+        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);
  });

--- a/src/components/map/index.tsx
+++ b/src/components/map/index.tsx
@ -1 +1 @@
-export { default } from './Map';
+export { default, getState } from './Map';