41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
|
import React from 'react';
|
||
|
|
|
||
|
|
import { Geolocation } from '@awesome-cordova-plugins/geolocation';
|
||
|
|
|
||
|
|
import './GetLocation.css';
|
||
|
|
import { IonButton, IonIcon } from '@ionic/react';
|
||
|
|
import { locateOutline } from 'ionicons/icons';
|
||
|
|
import { useAtom } from 'jotai';
|
||
|
|
import { setCenterAtom } from '../../App';
|
||
|
|
|
||
|
|
const GetLocation: React.FC<{}> = () => {
|
||
|
|
const [, setCenter] = useAtom(setCenterAtom);
|
||
|
|
|
||
|
|
const onClickHandler = (event: any) => {
|
||
|
|
console.log('Click handler');
|
||
|
|
Geolocation.getCurrentPosition().then((position) => {
|
||
|
|
console.log(
|
||
|
|
`Click handler, position: ${position.coords.latitude}, ${position.coords.longitude}`
|
||
|
|
);
|
||
|
|
setCenter({
|
||
|
|
lat: position.coords.latitude,
|
||
|
|
lon: position.coords.longitude,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<IonButton
|
||
|
|
onClick={onClickHandler}
|
||
|
|
className='get-location get-position'
|
||
|
|
shape='round'
|
||
|
|
size='small'
|
||
|
|
fill='solid'
|
||
|
|
>
|
||
|
|
<IonIcon slot='icon-only' icon={locateOutline} color='white' />
|
||
|
|
</IonButton>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default GetLocation;
|