Re-implementing GetLocation
This commit is contained in:
parent
ef8ee5e00e
commit
1efdc30e5c
|
@ -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>
|
|
@ -10,10 +10,13 @@
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@awesome-cordova-plugins/geolocation": "^6.2.0",
|
||||||
"@capacitor/android": "^3.4.3",
|
"@capacitor/android": "^3.4.3",
|
||||||
"@capacitor/core": "^3.4.3",
|
"@capacitor/core": "^3.4.3",
|
||||||
"@capacitor/ios": "^3.4.3",
|
"@capacitor/ios": "^3.4.3",
|
||||||
"@solidjs/router": "^0.5.1",
|
"@solidjs/router": "^0.5.1",
|
||||||
|
"@suid/icons-material": "^0.5.1",
|
||||||
|
"@suid/material": "^0.8.0",
|
||||||
"ol": "^7.1.0",
|
"ol": "^7.1.0",
|
||||||
"solid-js": "^1.3.12"
|
"solid-js": "^1.3.12"
|
||||||
},
|
},
|
||||||
|
@ -47,6 +50,30 @@
|
||||||
"node": ">=6.0.0"
|
"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": {
|
"node_modules/@babel/code-frame": {
|
||||||
"version": "7.18.6",
|
"version": "7.18.6",
|
||||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.6.6.tgz",
|
||||||
"integrity": "sha512-3MUulwMtsdCA9lw8a/Kc0XDBJJVCkYTQ5aGd+///TbfkOMXoOGAzzoiYKwPEsLYZv7He7fKJ/mCacqKOO7REyg=="
|
"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": {
|
"node_modules/@sinclair/typebox": {
|
||||||
"version": "0.24.51",
|
"version": "0.24.51",
|
||||||
"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
|
"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
|
||||||
|
@ -969,6 +1005,104 @@
|
||||||
"solid-js": "^1.5.3"
|
"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": {
|
"node_modules/@testing-library/dom": {
|
||||||
"version": "8.19.0",
|
"version": "8.19.0",
|
||||||
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.0.tgz",
|
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.0.tgz",
|
||||||
|
@ -1088,6 +1222,11 @@
|
||||||
"@types/chai": "*"
|
"@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": {
|
"node_modules/@types/fs-extra": {
|
||||||
"version": "8.1.2",
|
"version": "8.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.1.2.tgz",
|
||||||
|
@ -1516,6 +1655,14 @@
|
||||||
"node": ">=8"
|
"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": {
|
"node_modules/color-convert": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
|
||||||
"integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
|
"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": {
|
"node_modules/safe-buffer": {
|
||||||
"version": "5.2.1",
|
"version": "5.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
||||||
|
|
|
@ -23,10 +23,13 @@
|
||||||
"vitest": ">0.6.0"
|
"vitest": ">0.6.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@awesome-cordova-plugins/geolocation": "^6.2.0",
|
||||||
"@capacitor/android": "^3.4.3",
|
"@capacitor/android": "^3.4.3",
|
||||||
"@capacitor/core": "^3.4.3",
|
"@capacitor/core": "^3.4.3",
|
||||||
"@capacitor/ios": "^3.4.3",
|
"@capacitor/ios": "^3.4.3",
|
||||||
"@solidjs/router": "^0.5.1",
|
"@solidjs/router": "^0.5.1",
|
||||||
|
"@suid/icons-material": "^0.5.1",
|
||||||
|
"@suid/material": "^0.8.0",
|
||||||
"ol": "^7.1.0",
|
"ol": "^7.1.0",
|
||||||
"solid-js": "^1.3.12"
|
"solid-js": "^1.3.12"
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
.getLocation {
|
||||||
|
--opacity: 0.6;
|
||||||
|
--ion-background-color: white;
|
||||||
|
margin-left: calc(50% - 20px) !important;
|
||||||
|
position: fixed !important;
|
||||||
|
bottom: 6px;
|
||||||
|
}
|
|
@ -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;
|
|
@ -0,0 +1 @@
|
||||||
|
export { default } from './GetLocation';
|
|
@ -21,25 +21,42 @@ import { useGeographic as olUseGeographic } from 'ol/proj';
|
||||||
import 'ol/ol.css';
|
import 'ol/ol.css';
|
||||||
import './Map.css';
|
import './Map.css';
|
||||||
import { Collection } from 'ol';
|
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 Map: Component = () => {
|
||||||
const [getMap, setMap] = createSignal<OlMap | null>(null);
|
const [getMap, setMap] = createSignal<OlMap | null>(null);
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const [state, setState] = createSignal(params);
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
let target: HTMLDivElement;
|
||||||
|
console.log({ caller: 'Map', center: params.center });
|
||||||
|
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
setState(params);
|
setState({
|
||||||
|
lon: +params.lon,
|
||||||
|
lat: +params.lat,
|
||||||
|
rotation: +params.rotation,
|
||||||
|
zoom: +params.zoom,
|
||||||
|
});
|
||||||
const map = getMap();
|
const map = getMap();
|
||||||
const view = map?.getView();
|
const view = map?.getView();
|
||||||
view?.animate({
|
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,
|
duration: 1000,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
const navigate = useNavigate();
|
|
||||||
let target: HTMLDivElement;
|
|
||||||
console.log({ caller: 'Map', center: params.center });
|
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
olUseGeographic();
|
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({
|
const olMap = new OlMap({
|
||||||
view: new View({
|
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: [
|
layers: [
|
||||||
new TileLayer({
|
new TileLayer({
|
||||||
|
@ -82,9 +93,23 @@ const Map: Component = () => {
|
||||||
//new VectorLayer({ source: newSource }),
|
//new VectorLayer({ source: newSource }),
|
||||||
],
|
],
|
||||||
target: target,
|
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);
|
olMap.on(['moveend'], changeListener);
|
||||||
|
|
||||||
setMap(olMap);
|
setMap(olMap);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
export { default } from './Map';
|
export { default, getState } from './Map';
|
||||||
|
|
Loading…
Reference in New Issue