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

This commit is contained in:
Eric van der Vlist 2022-11-25 11:34:54 +01:00
parent ae647a0d9f
commit 0a967559b8
5 changed files with 54 additions and 5 deletions

View File

@ -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",

View File

@ -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"
}

View File

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

View File

@ -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],
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);
});

View File

@ -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
);