Looking promising !

This commit is contained in:
Eric van der Vlist 2022-11-25 16:13:05 +01:00
parent 63e5076211
commit 29cfebe27d
5 changed files with 34 additions and 13 deletions

View File

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" <manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.app"> package="com.dyomedea.solid">
<application <application
android:allowBackup="true" android:allowBackup="true"
@ -15,7 +15,9 @@
android:name="com.example.app.MainActivity" android:name="com.example.app.MainActivity"
android:label="@string/title_activity_main" android:label="@string/title_activity_main"
android:theme="@style/AppTheme.NoActionBarLaunch" android:theme="@style/AppTheme.NoActionBarLaunch"
android:launchMode="singleTask"> android:launchMode="singleTask"
android:exported="true">
<intent-filter> <intent-filter>
<action android:name="android.intent.action.MAIN" /> <action android:name="android.intent.action.MAIN" />

View File

@ -1,6 +1,6 @@
{ {
"appId": "com.example.app", "appId": "com.dyomedea.solid",
"appName": "capacitor-solid-template", "appName": "solid-ol",
"webDir": "dist", "webDir": "dist",
"bundledWebRuntime": false "bundledWebRuntime": false
} }

View File

@ -1,8 +1,8 @@
import { CapacitorConfig } from '@capacitor/cli'; import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = { const config: CapacitorConfig = {
appId: 'com.example.app', appId: 'com.dyomedea.solid',
appName: 'capacitor-solid-template', appName: 'solid-ol',
webDir: 'dist', webDir: 'dist',
bundledWebRuntime: false, bundledWebRuntime: false,
}; };

View File

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

View File

@ -2,10 +2,10 @@
import { render } from 'solid-js/web'; import { render } from 'solid-js/web';
import { Router, hashIntegration } from '@solidjs/router'; import { Router, hashIntegration } from '@solidjs/router';
import App from './App'; import App from './App';
//source={hashIntegration()}
render( render(
() => ( () => (
<Router source={hashIntegration()}> <Router >
<App /> <App />
</Router> </Router>
), ),