Re-implementing GetLocation

src/components/map/Map.tsx

@@ -21,25 +21,42 @@ import { useGeographic as olUseGeographic } from 'ol/proj';
 import 'ol/ol.css';
 import './Map.css';
 import { Collection } from 'ol';
+import GetLocation from '../get-location';
+
+const [getState, setState] = createSignal({
+  lon: 0,
+  lat: 0,
+  rotation: 0,
+  zoom: 0,
+});
+
+export { getState };
 
 const Map: Component = () => {
   const [getMap, setMap] = createSignal<OlMap | null>(null);
   const params = useParams();
-  const [state, setState] = createSignal(params);
+  const navigate = useNavigate();
+
+  let target: HTMLDivElement;
+  console.log({ caller: 'Map', center: params.center });
+
+
   createEffect(() => {
-    setState(params);
+    setState({
+      lon: +params.lon,
+      lat: +params.lat,
+      rotation: +params.rotation,
+      zoom: +params.zoom,
+    });
     const map = getMap();
     const view = map?.getView();
     view?.animate({
-      center: [+state().lon, +state().lat],
-      rotation: +state().rotation,
-      zoom: +state().zoom,
+      center: [getState().lon, getState().lat],
+      rotation: getState().rotation,
+      zoom: getState().zoom,
       duration: 1000,
     });
   });
-  const navigate = useNavigate();
-  let target: HTMLDivElement;
-  console.log({ caller: 'Map', center: params.center });
 
   onMount(() => {
     olUseGeographic();
@@ -63,17 +80,11 @@ const Map: Component = () => {
       });
     };
 
-    const controls = new Collection([
-      new Attribution({ collapsible: true }),
-      new Rotate(),
-      new ScaleLine({ bar: true }),
-      //      new Control({ element: getLocation.current ?? undefined }),
-    ]);
     const olMap = new OlMap({
       view: new View({
-        center: [+state().lon, +state().lat],
-        zoom: +state().zoom,
-        rotation: +state().rotation,
+        center: [+getState().lon, +getState().lat],
+        zoom: +getState().zoom,
+        rotation: +getState().rotation,
       }),
       layers: [
         new TileLayer({
@@ -82,9 +93,23 @@ const Map: Component = () => {
         //new VectorLayer({ source: newSource }),
       ],
       target: target,
-      controls,
+      controls: new Collection<Control>([
+        new Attribution({ collapsible: true }),
+        new Rotate(),
+        new ScaleLine({ bar: true }),
+        // @ts-ignore
+        new Control({
+          // @ts-ignore
+          element: (
+            <div>
+              <GetLocation />
+            </div>
+          ),
+        }),
+      ]),
     });
     olMap.on(['moveend'], changeListener);
+
     setMap(olMap);
   });
 

src/components/map/index.tsx

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