dyomedea/src/App.tsx

117 lines
2.9 KiB
TypeScript
Raw Normal View History

import {
IonApp,
IonButtons,
IonContent,
IonFooter,
IonHeader,
IonToolbar,
setupIonicReact,
} from '@ionic/react';
2022-08-31 12:35:20 +00:00
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';
/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';
/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';
/* Theme variables */
import './theme/variables.css';
2022-10-31 17:05:58 +00:00
import LiveMap from './components/map/LiveMap';
2022-08-31 12:35:20 +00:00
import { atom, useAtom } from 'jotai';
import { atomWithHash } from 'jotai/utils';
import { MapScope } from './components/map/types';
import { debounce } from 'lodash';
2022-11-02 14:29:13 +00:00
import GetLocation from './components/buttons/GetLocation';
import { geoPoint } from './components/map/types';
2022-11-02 15:04:18 +00:00
import Back from './components/buttons/Back';
import Forward from './components/buttons/Forward';
2022-11-02 20:27:29 +00:00
import Marker from './components/map/Marker';
2022-08-31 12:35:20 +00:00
setupIonicReact();
const initialScope: MapScope = {
center: { lat: -37.8403508, lon: 77.5539501 },
zoom: 13,
tileProvider: 'osm',
};
const scopeAtom = atomWithHash('scope', initialScope);
export const setCenterAtom = atom(null, (get, set, center: geoPoint) => {
const previousScope = get(scopeAtom);
const newScope: MapScope = {
...previousScope,
center: center,
};
set(scopeAtom, newScope);
});
2022-10-17 10:04:25 +00:00
/**
*
* @returns The root app component
*/
const App: React.FC = () => {
const [scope, setScope] = useAtom(scopeAtom);
console.log(`App, scope: ${JSON.stringify(scope)}`);
2022-11-02 20:27:29 +00:00
const marker = (
<Marker
coordinates={{ lat: -37.8403508, lon: 77.5539501 }}
icon={
<circle
cx={0}
cy={0}
r={6 / 256}
fill='blue'
opacity='90%'
stroke='white'
strokeWidth={3 / 256}
strokeOpacity='100%'
></circle>
}
key='current'
/>
);
return (
<IonApp>
<IonContent fullscreen={true}>
<IonApp>
<LiveMap
scope={scope}
setScope={debounce(setScope, 1000)}
numberOfTiledLayers={5}
2022-11-02 20:27:29 +00:00
markers={[marker]}
/>
</IonApp>
</IonContent>
<IonHeader className='ion-no-border' translucent={true}>
<IonToolbar>
2022-11-02 15:04:18 +00:00
<IonButtons slot='start'>
<Back />
<Forward />
</IonButtons>
<IonButtons slot='end'></IonButtons>
</IonToolbar>
</IonHeader>
<IonFooter className='ion-no-border'>
<IonToolbar>
<IonButtons>
<GetLocation />
</IonButtons>
</IonToolbar>
</IonFooter>
</IonApp>
);
};
2022-08-31 12:35:20 +00:00
export default App;