Adding a (non yet operational) control to get the current location.

This commit is contained in:
Eric van der Vlist 2022-11-22 18:03:53 +01:00
parent 0f8f892688
commit 0ba385c476
4 changed files with 85 additions and 3 deletions

View File

@ -0,0 +1,9 @@
.getLocation {
--opacity: 0.6;
--ion-background-color: white;
margin-left: calc(50% - 20px);
position: fixed;
bottom: 6px
;
}

View File

@ -0,0 +1,47 @@
import React from 'react';
// import { Geolocation } from '@awesome-cordova-plugins/geolocation';
import style from './GetLocation.module.css';
import { IonButton, IonIcon } from '@ionic/react';
import { locateOutline } from 'ionicons/icons';
// import { useAtom } from 'jotai';
// import { setCenterAtom } from '../../App';
// import { locationAtom } from '../map/CurrentLocation';
const GetLocation: React.FC<{}> = () => {
// const [, setCenter] = useAtom(setCenterAtom);
// const [, setLocation] = useAtom(locationAtom);
// 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,
// });
// setLocation({
// lat: position.coords.latitude,
// lon: position.coords.longitude,
// });
// });
// };
// onClick={onClickHandler}
return (
<IonButton
className={style.getLocation}
shape='round'
size='small'
fill='solid'
>
<IonIcon slot='icon-only' icon={locateOutline} color='white' />
</IonButton>
);
};
export default GetLocation;

View File

@ -0,0 +1 @@
export { default } from './GetLocation';

View File

@ -3,18 +3,36 @@ import OlMap from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import Attribution from 'ol/control/Attribution';
import OSM, { ATTRIBUTION } from 'ol/source/OSM';
import Rotate from 'ol/control/Rotate';
import ScaleLine from 'ol/control/ScaleLine';
import Control from 'ol/control/Control';
import OSM from 'ol/source/OSM';
import './Map.css';
import Collection from 'ol/Collection';
import { createPortal } from 'react-dom';
import GetLocation from '../get-location';
export interface MapProperties {}
export const Map: React.FC<MapProperties> = (props: MapProperties) => {
const target = useRef<HTMLDivElement>(null);
const getLocation = useRef<HTMLDivElement>(null);
useEffect(() => {
const controls = new Collection([new Attribution({ collapsible: true })]);
// const getLocation = target.current
// ? createPortal(<GetLocation />, target.current)
// : null;
console.log({ caller: 'Map / useEffect', target, getLocation });
const controls = new Collection([
new Attribution({ collapsible: true }),
new Rotate(),
new ScaleLine({ bar: true }),
new Control({ element: getLocation.current ?? undefined }),
]);
const map = new OlMap({
view: new View({
center: [0, 0],
@ -30,7 +48,14 @@ export const Map: React.FC<MapProperties> = (props: MapProperties) => {
});
}, []);
return <div ref={target} className='ol-map' />;
return (
<>
<div ref={getLocation}>
<GetLocation />
</div>
<div ref={target} className='ol-map'></div>
</>
);
};
export default Map;