diff --git a/AndroidManifest.xml b/AndroidManifest.xml new file mode 100644 index 0000000..0cd6a76 --- /dev/null +++ b/AndroidManifest.xml @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/package-lock.json b/package-lock.json index 1cea9d4..f585ac9 100644 --- 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", diff --git a/package.json b/package.json index ca91a9b..e2278ce 100644 --- 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" } diff --git a/src/components/get-location/GetLocation.module.css b/src/components/get-location/GetLocation.module.css new file mode 100644 index 0000000..4a3d3aa --- /dev/null +++ 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; +} diff --git a/src/components/get-location/GetLocation.tsx b/src/components/get-location/GetLocation.tsx new file mode 100644 index 0000000..3b151ac --- /dev/null +++ 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 ( + + + + ); +}; + +export default GetLocation; diff --git a/src/components/get-location/index.ts b/src/components/get-location/index.ts new file mode 100644 index 0000000..4a0e844 --- /dev/null +++ b/src/components/get-location/index.ts @@ -0,0 +1 @@ +export { default } from './GetLocation'; diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index cbb340c..5c0d877 100644 --- 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(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([ + new Attribution({ collapsible: true }), + new Rotate(), + new ScaleLine({ bar: true }), + // @ts-ignore + new Control({ + // @ts-ignore + element: ( +
+ +
+ ), + }), + ]), }); olMap.on(['moveend'], changeListener); + setMap(olMap); }); diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx index 84bebe9..718cf08 100644 --- a/src/components/map/index.tsx +++ b/src/components/map/index.tsx @@ -1 +1 @@ -export { default } from './Map'; +export { default, getState } from './Map';