Using atomWithHash to enable back/forward actions.

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 `<LiveMap>` component.
- * 
+ *
  * A `<LiveMap>` is a wrapper around a {@link components/map/Map!Map} component which updates the `<Map>`'s scope according to user's mouse, wheel and touch events.
- * 
+ *
  * To do so, `<LiveMap>` embeds a `<Map>` component together with a {@link components/map/Handlers!Handlers} component which listens to user's event.
- * 
+ *
  * The main task of `<LiveMap>` components is thus to translate {@link Transformation}s delivered by `<Handler>` in pixels into geographical coordinates.
  */
 export const LiveMap: react.FC<LiveMapProperties> = (
   props: LiveMapProperties
 ) => {
   const [scope, setScope] = useState(props.scope);
-  // console.log(`LiveMap rendering: ${JSON.stringify(scope)}`);
+  useEffect(() => {
+    setScope(props.scope);
+  }, [props.scope]);
+  console.log(`LiveMap rendering: ${JSON.stringify(scope)}`);
   const transform = (t: Transformation) => {
     const deltaZoom = t.deltaZoom === null ? 1 : t.deltaZoom;
     const deltaZoomLevel = Math.log2(deltaZoom);
@@ -114,6 +121,9 @@ export const LiveMap: react.FC<LiveMapProperties> = (
     //   }, delta lon: ${newScope.center.lon - scope.center.lon}`
     // );
     setScope(newScope);
+    if (props.setScope !== undefined) {
+      props.setScope(newScope);
+    }
   };
 
   return (