Getting stuff done in the sandbox.

src/components/map/Map.css

@@ -0,0 +1,17 @@
+.ol-map {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.ol-control {
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.4);
+  border-radius: 4px;
+  padding: 2px;
+}
+.ol-full-screen {
+  top: 0.5em;
+  right: 0.5em;
+}

src/components/map/Map.tsx

@@ -0,0 +1,89 @@
+import { Component, createEffect, createSignal, onMount } from 'solid-js';
+import {
+  useParams,
+  useNavigate,
+  useRouteData,
+  useBeforeLeave,
+} from '@solidjs/router';
+import OlMap from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import Feature from 'ol/Feature';
+import Attribution from 'ol/control/Attribution';
+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 'ol/ol.css';
+import './Map.css';
+
+const Map: Component = () => {
+  const [getMap, setMap] = createSignal<OlMap | null>(null);
+  const params = useParams();
+  const [state, setState] = createSignal(params);
+  createEffect(() => {
+    setState(params);
+    const map = getMap();
+    const view = map?.getView();
+    view?.setCenter([+state().lon, +state().lat]);
+    view?.setRotation(+state().rotation);
+    view?.setZoom(+state().zoom);
+  });
+  const navigate = useNavigate();
+  let target: HTMLDivElement;
+  console.log({ caller: 'Map', center: params.center });
+
+  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: [+state().lon, +state().lat],
+        zoom: +state().zoom,
+        rotation: +state().rotation,
+      }),
+      layers: [
+        new TileLayer({
+          source: new OSM(),
+        }),
+        //new VectorLayer({ source: newSource }),
+      ],
+      target: target,
+      //    controls,
+    });
+    olMap.on(['moveend'], changeListener);
+    setMap(olMap);
+  });
+
+  useBeforeLeave((event) => {
+    console.log({ caller: 'Map / useBeforeLeave', event });
+  });
+
+  // @ts-ignore
+  return <div class='ol-map' ref={target} />;
+};
+
+export default Map;

src/components/map/index.tsx

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