diff --git a/src/App.tsx b/src/App.tsx
index 7aede86..e3c7459 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,32 +22,46 @@ import '@ionic/react/css/display.css';
import './theme/variables.css';
import LiveMap from './components/map/LiveMap';
+import { useAtom } from 'jotai';
+import { atomWithHash } from 'jotai/utils';
+import { MapScope } from './components/map/types';
+import { debounce } from 'lodash';
+
setupIonicReact();
+const initialScope: MapScope = {
+ center: { lat: -37.8403508, lon: 77.5539501 },
+ zoom: 13,
+ tileProvider: 'osm',
+};
+const scopeAtom = atomWithHash('scope', initialScope);
+
/**
*
* @returns The root app component
*/
-const App: React.FC = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-);
+const App: React.FC = () => {
+ const [scope, setScope] = useAtom(scopeAtom);
+
+ console.log(`App, scope: ${JSON.stringify(scope)}`);
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
export default App;
diff --git a/src/components/map/LiveMap.tsx b/src/components/map/LiveMap.tsx
index 79551b2..6f64a7a 100644
--- a/src/components/map/LiveMap.tsx
+++ b/src/components/map/LiveMap.tsx
@@ -1,4 +1,4 @@
-import react, { useState } from 'react';
+import react, { useEffect, useState } from 'react';
import { MapScope, Point } from './types';
import Map from './Map';
import Handlers from './Handlers';
@@ -31,26 +31,33 @@ export interface Transformation {
}
export interface LiveMapProperties {
+ /** The initial map's scope */
scope: MapScope;
+ /** The number of tiled layers (default to 1) */
numberOfTiledLayers?: number;
+ /** If provided, a function to call when the scope is updated. */
+ setScope?: (scope: MapScope) => void;
}
/**
- *
- * @param props
+ *
+ * @param props
* @returns A `` component.
- *
+ *
* A `` is a wrapper around a {@link components/map/Map!Map} component which updates the `