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"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.app">
package="com.dyomedea.solid">
<application
android:allowBackup="true"
@ -15,7 +15,9 @@
android:name="com.example.app.MainActivity"
android:label="@string/title_activity_main"
android:theme="@style/AppTheme.NoActionBarLaunch"
android:launchMode="singleTask">
android:launchMode="singleTask"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

View File

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

View File

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

View File

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

View File

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