Dirty hack to store the app state and restore it at app startup.

src/components/map/Map.tsx

@@ -36,6 +36,8 @@ import DragZoom from 'ol/interaction/DragZoom';
 import Infos, { clickHandler } from '../infos';
 import GpxDialog from '../gpx-dialog';
 import GpxRecord from '../gpx-record';
+import dispatch from '../../workers/dispatcher-main';
+import { isEqual } from 'lodash';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -52,12 +54,29 @@ const [getMap, setMap] = createSignal<OlMap | null>(null);
 export { getMap };
 
 const Map: Component = () => {
-  const params = useParams();
   const navigate = useNavigate();
+  const params = useParams();
+
+  if (
+    params.lat === '0' &&
+    params.lon === '0' &&
+    params.provider === 'osm' &&
+    params.rotation === '0' &&
+    params.zoom === '2'
+  ) {
+    dispatch({ action: 'getState' }, (error, state) => {
+      if (state !== null) {
+        console;
+        navigate(
+          `/map/${state.provider}/${state.lon}/${state.lat}/${state.zoom}/${state.rotation}`
+        );
+      }
+    });
+  }
 
   let target: HTMLDivElement;
 
-  createEffect(() => {
+  createEffect(async () => {
     console.log({
       caller: 'Map / setState',
       params: {
@@ -71,6 +90,7 @@ const Map: Component = () => {
       rotation: +params.rotation,
       zoom: +params.zoom,
     });
+    await dispatch({ action: 'setState', params: getState() });
     const map = getMap();
 
     const layers = map?.getLayers();
@@ -131,7 +151,7 @@ const Map: Component = () => {
     }
   });
 
-  onMount(() => {
+  onMount(async () => {
     olUseGeographic();
 
     const changeListener = (event: any) => {

src/db/lib.ts

@@ -17,7 +17,7 @@ export const put = async (
     current = { _rev: undefined, doc: cloneDeep(defaultDoc) };
   }
   try {
-    db.put({ _id, _rev: current._rev, type, doc: update(current.doc) });
+    await db.put({ _id, _rev: current._rev, type, doc: update(current.doc) });
   } catch (error: any) {
     if (error.name === 'conflict') {
       console.log({ caller: 'db.put', _id, type, defaultDoc, error });

src/db/state.ts

@@ -0,0 +1,25 @@
+import { get, put } from './lib';
+
+interface State {
+  lon: number;
+  lat: number;
+  rotation: number;
+  zoom: number;
+  provider: string;
+}
+
+export const getState = async <State>() => {
+  try {
+    const state = (await get('state')).doc;
+    console.log({ caller: 'getState', state });
+    return state;
+  } catch {
+    return null;
+  }
+};
+
+export const setState = async (state: State) => {
+  await put('state', 'state', (doc) => state, {});
+  console.log({ caller: 'setState', state });
+  return 'state';
+};

src/workers/dispatcher-worker.ts

@@ -11,6 +11,7 @@ import {
   getAllGpxes,
   getAllGpxesWithSummary,
 } from '../db/gpx';
+import { getState, setState } from '../db/state';
 import { getTrk, putNewTrk } from '../db/trk';
 import { getTrkseg, appendTrkpt } from '../db/trkseg';
 import { getWpt, putWpt } from '../db/wpt';
@@ -37,6 +38,8 @@ onmessage = async function (e) {
     getWpt,
 
     putWpt,
+    getState,
+    setState,
 
     getAndWatch,
     cancelWatch,