Adding a (non yet operational) control to get the current location.
This commit is contained in:
parent
0f8f892688
commit
0ba385c476
|
@ -0,0 +1,9 @@
|
|||
.getLocation {
|
||||
--opacity: 0.6;
|
||||
--ion-background-color: white;
|
||||
margin-left: calc(50% - 20px);
|
||||
position: fixed;
|
||||
bottom: 6px
|
||||
;
|
||||
}
|
||||
|
|
@ -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;
|
|
@ -0,0 +1 @@
|
|||
export { default } from './GetLocation';
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue