Moving the map center to the current location when required.

src/components/map/Map.tsx

@@ -1,4 +1,8 @@
 import React, { useEffect, useRef } from 'react';
+
+import { atom, useAtom } from 'jotai';
+import { atomWithHash } from 'jotai-location';
+
 import OlMap from 'ol/Map';
 import View from 'ol/View';
 import TileLayer from 'ol/layer/Tile';
@@ -7,37 +11,95 @@ 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 { useGeographic as olUseGeographic } from 'ol/proj';
+
+import { isEqual } from 'lodash';
 
 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);
+olUseGeographic();
 
+const mapAtom = atom<OlMap | null>(null);
+
+export const stateAtom = atomWithHash<any>('map', null);
+//atom(
+// (get) => {
+//   const map = get(mapAtom);
+//   const view = map?.getView();
+//   return {
+//     center: view?.getCenter(),
+//     zoom: view?.getZoom(),
+//     rotation: view?.getRotation(),
+//   };
+// },
+// (get, set, state: any) => {
+//   const map = get(mapAtom);
+//   const view = map?.getView();
+//   view?.setCenter(state.center);
+//   view?.setZoom(state.zoom);
+//   view?.setRotation(state.rotation);
+// }
+//);
+
+export const Map: React.FC<MapProperties> = (props: MapProperties) => {
+  const [map, setMap] = useAtom(mapAtom);
+  const [state, setState] = useAtom(stateAtom);
+
+  const target = useRef<HTMLDivElement>(null);
   const getLocation = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    // const getLocation = target.current
-    //   ? createPortal(<GetLocation />, target.current)
-    //   : null;
+  const previousState = useRef<any>(null);
 
+  if (state && map) {
+    if (!isEqual(state, previousState.current)) {
+      console.log({ caller: 'Map / updateView', state });
+      previousState.current = state;
+      map.getView().animate(state);
+    }
+    // const view = map.getView();
+    // view.setCenter(state.center);
+    // view.setZoom(state.zoom);
+    // view.setRotation(state.rotation);
+    // map.renderSync();
+  }
+
+  useEffect(() => {
     console.log({ caller: 'Map / useEffect', target, getLocation });
 
+    const changeListener = (event: any) => {
+      const view = olMap?.getView();
+      const newState = {
+        center: view?.getCenter(),
+        zoom: view?.getZoom(),
+        rotation: view?.getRotation(),
+      };
+      setState(newState);
+
+      console.log({
+        caller: 'Map / changeListener',
+        event,
+        newState,
+        olMap,
+      });
+    };
+
     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],
-        zoom: 1,
-      }),
+    const olMap = new OlMap({
+      view: new View(
+        state ?? {
+          center: [0, 0],
+          zoom: 1,
+        }
+      ),
       layers: [
         new TileLayer({
           source: new OSM(),
@@ -46,6 +108,8 @@ export const Map: React.FC<MapProperties> = (props: MapProperties) => {
       target: target.current ?? undefined,
       controls,
     });
+    olMap.on(['change', 'moveend'], changeListener);
+    setMap(olMap);
   }, []);
 
   return (

src/components/map/index.ts

@@ -1 +1 @@
-export { default } from './Map';
+export { default, stateAtom } from './Map';