diff --git a/solid/package-lock.json b/solid/package-lock.json
index 2263dbd..017b087 100644
--- a/solid/package-lock.json
+++ b/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",
diff --git a/solid/package.json b/solid/package.json
index bf51251..c667b49 100644
--- a/solid/package.json
+++ b/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"
}
diff --git a/solid/src/App.tsx b/solid/src/App.tsx
index 88aa24b..881d783 100644
--- a/solid/src/App.tsx
+++ b/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 ;
+ return (
+
+
+ } />
+
+ );
};
export default App;
diff --git a/solid/src/components/map/Map.tsx b/solid/src/components/map/Map.tsx
index a16484a..00feaca 100644
--- a/solid/src/components/map/Map.tsx
+++ b/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(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],
- zoom: 1,
+ center: [+params.lon, +params.lat],
+ 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);
});
diff --git a/solid/src/index.tsx b/solid/src/index.tsx
index b83a025..fb3883c 100644
--- a/solid/src/index.tsx
+++ b/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(() => , document.getElementById('root') as HTMLElement);
+render(
+ () => (
+
+
+
+ ),
+ document.getElementById('root') as HTMLElement
+);