Getting stuff done in the sandbox.

src/App.module.css

@@ -0,0 +1,33 @@
+.App {
+  text-align: center;
+}
+
+.logo {
+  animation: logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.link {
+  color: #b318f0;
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.tsx

@@ -0,0 +1,14 @@
+import type { Component } from 'solid-js';
+import { Routes, Route, Navigate } from '@solidjs/router';
+import Map from './components/map';
+
+const App: Component = () => {
+  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;

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';

src/index.tsx

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

src/todo-list.test.tsx

@@ -1,46 +0,0 @@
-import { describe, expect, test } from 'vitest';
-
-import { render, fireEvent } from 'solid-testing-library';
-
-import { TodoList } from './todo-list';
-
-describe('<TodoList />', () => {
-  test('it will render an text input and a button', () => {
-    const { getByPlaceholderText, getByText, unmount } = render(() => (
-      <TodoList />
-    ));
-    expect(getByPlaceholderText('new todo here')).toBeInTheDocument();
-    expect(getByText('Add Todo')).toBeInTheDocument();
-    unmount();
-  });
-
-  test('it will add a new todo', async () => {
-    const { getByPlaceholderText, getByText, unmount } = render(() => (
-      <TodoList />
-    ));
-    const input = getByPlaceholderText('new todo here') as HTMLInputElement;
-    const button = getByText('Add Todo');
-    input.value = 'test new todo';
-    fireEvent.click(button as HTMLInputElement);
-    expect(input.value).toBe('');
-    expect(getByText(/test new todo/)).toBeInTheDocument();
-    unmount();
-  });
-
-  test('it will mark a todo as completed', async () => {
-    const { getByPlaceholderText, findByRole, getByText, unmount } = render(
-      () => <TodoList />,
-    );
-    const input = getByPlaceholderText('new todo here') as HTMLInputElement;
-    const button = getByText('Add Todo') as HTMLButtonElement;
-    input.value = 'mark new todo as completed';
-    fireEvent.click(button);
-    const completed = (await findByRole('checkbox')) as HTMLInputElement;
-    expect(completed?.checked).toBe(false);
-    fireEvent.click(completed);
-    expect(completed?.checked).toBe(true);
-    const text = getByText('mark new todo as completed') as HTMLSpanElement;
-    expect(text).toHaveStyle({ 'text-decoration': 'line-through' });
-    unmount();
-  });
-});

src/todo-list.tsx

@@ -1,57 +0,0 @@
-import { For, createSignal } from 'solid-js';
-
-type Todo = { id: number; text: string; completed: boolean };
-
-export const TodoList = () => {
-  let input!: HTMLInputElement;
-  let todoId = 0;
-  const [todos, setTodos] = createSignal<Todo[]>([]);
-  const addTodo = (text: string) => {
-    setTodos([...todos(), { id: ++todoId, text, completed: false }]);
-  };
-  const toggleTodo = (id: number) => {
-    setTodos(
-      todos().map((todo) =>
-        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
-      ),
-    );
-  };
-
-  return (
-    <>
-      <div>
-        <input placeholder="new todo here" ref={input} />
-        <button
-          onClick={() => {
-            if (!input.value.trim()) return;
-            addTodo(input.value);
-            input.value = '';
-          }}
-        >
-          Add Todo
-        </button>
-      </div>
-      <For each={todos()}>
-        {(todo) => {
-          const { id, text } = todo;
-          return (
-            <div>
-              <input
-                type="checkbox"
-                checked={todo.completed}
-                onchange={[toggleTodo, id]}
-              />
-              <span
-                style={{
-                  'text-decoration': todo.completed ? 'line-through' : 'none',
-                }}
-              >
-                {text}
-              </span>
-            </div>
-          );
-        }}
-      </For>
-    </>
-  );
-};