Using the router to store map state in the URL (as hash)

solid/package-lock.json

@@ -12,6 +12,7 @@
         "@capacitor/android": "^3.4.1",
         "@capacitor/core": "^3.9.0",
         "@capacitor/ios": "^3.4.1",
+        "@solidjs/router": "^0.5.1",
         "ol": "^7.1.0",
         "solid-js": "^1.3.12"
       },
@@ -787,6 +788,14 @@
       "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.6.6.tgz",
       "integrity": "sha512-3MUulwMtsdCA9lw8a/Kc0XDBJJVCkYTQ5aGd+///TbfkOMXoOGAzzoiYKwPEsLYZv7He7fKJ/mCacqKOO7REyg=="
     },
+    "node_modules/@solidjs/router": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@solidjs/router/-/router-0.5.1.tgz",
+      "integrity": "sha512-igyrwUqm/9T26Lb6l7oXwpc4lLUVqbhbN92wOL3NgLoLVmkQlUNTZciuAe+Su8XeJXlrWjl6oxDJDLt+6pws/g==",
+      "peerDependencies": {
+        "solid-js": "^1.5.3"
+      }
+    },
     "node_modules/@types/fs-extra": {
       "version": "8.1.2",
       "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.1.2.tgz",

solid/package.json

@@ -19,6 +19,7 @@
     "@capacitor/android": "^3.4.1",
     "@capacitor/core": "^3.9.0",
     "@capacitor/ios": "^3.4.1",
+    "@solidjs/router": "^0.5.1",
     "ol": "^7.1.0",
     "solid-js": "^1.3.12"
   }

solid/src/App.tsx

@@ -1,8 +1,14 @@
 import type { Component } from 'solid-js';
+import { Routes, Route, Navigate } from '@solidjs/router';
 import Map from './components/map';
 
 const App: Component = () => {
-  return <Map />;
+  return (
+    <Routes>
+      <Route path='/map/:lon/:lat/:zoom/:rotation' component={Map} />
+      <Route path='/*' element={<Navigate href='/map/0/0/1/0' />} />
+    </Routes>
+  );
 };
 
 export default App;

solid/src/components/map/Map.tsx

@@ -1,4 +1,5 @@
 import { Component, createSignal, onMount } from 'solid-js';
+import { useParams, useNavigate } from '@solidjs/router';
 import OlMap from 'ol/Map';
 import View from 'ol/View';
 import TileLayer from 'ol/layer/Tile';
@@ -17,13 +18,37 @@ import './Map.css';
 
 const Map: Component = () => {
   const [getMap, setMap] = createSignal<OlMap | null>(null);
+  const params = useParams();
+  const navigate = useNavigate();
   let target: HTMLDivElement;
 
   onMount(() => {
+    olUseGeographic();
+
+    const changeListener = (event: any) => {
+      const map = getMap();
+      const view = map?.getView();
+      const center = view?.getCenter();
+      if (center) {
+        navigate(
+          `/map/${center[0]}/${
+            center[1]
+          }/${view?.getZoom()}/${view?.getRotation()}`
+        );
+      }
+      console.log({
+        caller: 'Map / changeListener',
+        event,
+        params,
+        map,
+      });
+    };
+
     const olMap = new OlMap({
       view: new View({
-        center: [0, 0],
+        center: [+params.lon, +params.lat],
-        zoom: 1,
+        zoom: +params.zoom,
+        rotation: +params.rotation,
       }),
       layers: [
         new TileLayer({
@@ -34,7 +59,7 @@ const Map: Component = () => {
       target: target,
       //    controls,
     });
-    //  olMap.on(['moveend'], changeListener);
+    olMap.on(['moveend'], changeListener);
     setMap(olMap);
   });
 

solid/src/index.tsx

@@ -1,5 +1,13 @@
 /* @refresh reload */
 import { render } from 'solid-js/web';
+import { Router, hashIntegration } from '@solidjs/router';
 import App from './App';
 
-render(() => <App />, document.getElementById('root') as HTMLElement);
+render(
+  () => (
+    <Router source={hashIntegration()}>
+      <App />
+    </Router>
+  ),
+  document.getElementById('root') as HTMLElement
+);