|
|
@ -1,5 +1,10 @@ |
|
|
|
import { Component, createSignal, onMount } from 'solid-js'; |
|
|
|
import { useParams, useNavigate } from '@solidjs/router'; |
|
|
|
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'; |
|
|
@ -19,8 +24,18 @@ 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(); |
|
|
@ -46,9 +61,9 @@ const Map: Component = () => { |
|
|
|
|
|
|
|
const olMap = new OlMap({ |
|
|
|
view: new View({ |
|
|
|
center: [+params.lon, +params.lat], |
|
|
|
zoom: +params.zoom, |
|
|
|
rotation: +params.rotation, |
|
|
|
center: [+state().lon, +state().lat], |
|
|
|
zoom: +state().zoom, |
|
|
|
rotation: +state().rotation, |
|
|
|
}), |
|
|
|
layers: [ |
|
|
|
new TileLayer({ |
|
|
@ -63,6 +78,10 @@ const Map: Component = () => { |
|
|
|
setMap(olMap); |
|
|
|
}); |
|
|
|
|
|
|
|
useBeforeLeave((event) => { |
|
|
|
console.log({ caller: 'Map / useBeforeLeave', event }); |
|
|
|
}); |
|
|
|
|
|
|
|
// @ts-ignore
|
|
|
|
return <div class='ol-map' ref={target} />; |
|
|
|
}; |
|
|
|