commit 29f32370aacb881341158f20c704594e3d7f8bac
parent e3e10a76cf4385171fedcaf7208da79bf3b32e8b
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Sun, 1 Sep 2024 16:44:57 +0000
Add `/map` using svelte maplibre-gl component
Diffstat:
13 files changed, 115 insertions(+), 17 deletions(-)
diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
@@ -10,8 +10,8 @@ android {
apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
dependencies {
implementation project(':capacitor-browser')
- implementation project(':capacitor-dialog')
implementation project(':capacitor-device')
+ implementation project(':capacitor-dialog')
implementation project(':capacitor-geolocation')
implementation project(':capacitor-haptics')
implementation project(':capacitor-preferences')
diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
@@ -5,12 +5,12 @@ project(':capacitor-android').projectDir = new File('../../../node_modules/.pnpm
include ':capacitor-browser'
project(':capacitor-browser').projectDir = new File('../../../node_modules/.pnpm/@capacitor+browser@6.0.2_@capacitor+core@6.1.2/node_modules/@capacitor/browser/android')
-include ':capacitor-dialog'
-project(':capacitor-dialog').projectDir = new File('../../../node_modules/.pnpm/@capacitor+dialog@6.0.1_@capacitor+core@6.1.2/node_modules/@capacitor/dialog/android')
-
include ':capacitor-device'
project(':capacitor-device').projectDir = new File('../../../node_modules/.pnpm/@capacitor+device@6.0.1_@capacitor+core@6.1.2/node_modules/@capacitor/device/android')
+include ':capacitor-dialog'
+project(':capacitor-dialog').projectDir = new File('../../../node_modules/.pnpm/@capacitor+dialog@6.0.1_@capacitor+core@6.1.2/node_modules/@capacitor/dialog/android')
+
include ':capacitor-geolocation'
project(':capacitor-geolocation').projectDir = new File('../../../node_modules/.pnpm/@capacitor+geolocation@6.0.1_@capacitor+core@6.1.2/node_modules/@capacitor/geolocation/android')
diff --git a/ios/App/Podfile b/ios/App/Podfile
@@ -12,8 +12,8 @@ def capacitor_pods
pod 'Capacitor', :path => '../../../../node_modules/.pnpm/@capacitor+ios@6.1.2_@capacitor+core@6.1.2/node_modules/@capacitor/ios'
pod 'CapacitorCordova', :path => '../../../../node_modules/.pnpm/@capacitor+ios@6.1.2_@capacitor+core@6.1.2/node_modules/@capacitor/ios'
pod 'CapacitorBrowser', :path => '../../../../node_modules/.pnpm/@capacitor+browser@6.0.2_@capacitor+core@6.1.2/node_modules/@capacitor/browser'
- pod 'CapacitorDialog', :path => '../../../../node_modules/.pnpm/@capacitor+dialog@6.0.1_@capacitor+core@6.1.2/node_modules/@capacitor/dialog'
pod 'CapacitorDevice', :path => '../../../../node_modules/.pnpm/@capacitor+device@6.0.1_@capacitor+core@6.1.2/node_modules/@capacitor/device'
+ pod 'CapacitorDialog', :path => '../../../../node_modules/.pnpm/@capacitor+dialog@6.0.1_@capacitor+core@6.1.2/node_modules/@capacitor/dialog'
pod 'CapacitorGeolocation', :path => '../../../../node_modules/.pnpm/@capacitor+geolocation@6.0.1_@capacitor+core@6.1.2/node_modules/@capacitor/geolocation'
pod 'CapacitorHaptics', :path => '../../../../node_modules/.pnpm/@capacitor+haptics@6.0.1_@capacitor+core@6.1.2/node_modules/@capacitor/haptics'
pod 'CapacitorPreferences', :path => '../../../../node_modules/.pnpm/@capacitor+preferences@6.0.2_@capacitor+core@6.1.2/node_modules/@capacitor/preferences'
diff --git a/ios/App/Podfile.lock b/ios/App/Podfile.lock
@@ -114,6 +114,6 @@ SPEC CHECKSUMS:
SQLCipher: 77fbe633cd84db04b07876dd50766b4924b57d61
ZIPFoundation: b8c29ea7ae353b309bc810586181fd073cb3312c
-PODFILE CHECKSUM: 37b4ea0a5a13844ab526c251f4635f95ea68eb09
+PODFILE CHECKSUM: d735d5f1c8ed8c7099f2bf2d93f8347cd9b2eb64
COCOAPODS: 1.15.2
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
"autoprefixer": "^10.4.19",
"daisyui": "^4.10.0",
"postcss": "^8.4.38",
+ "postcss-import": "^16.1.0",
"svelte": "^4.2.19",
"svelte-check": "^3.8.6",
"tailwindcss": "^3.4.3",
@@ -37,8 +38,8 @@
"@capacitor/android": "^6.1.2",
"@capacitor/browser": "^6.0.0",
"@capacitor/core": "^6.1.2",
- "@capacitor/dialog": "^6.0.0",
"@capacitor/device": "^6.0.0",
+ "@capacitor/dialog": "^6.0.0",
"@capacitor/geolocation": "^6.0.0",
"@capacitor/haptics": "^6.0.0",
"@capacitor/ios": "^6.1.2",
@@ -48,8 +49,8 @@
"@capacitor/status-bar": "^6.0.0",
"@ionic/pwa-elements": "^3.3.0",
"@nostr-dev-kit/ndk": "^2.7.1",
- "@nostr-dev-kit/ndk-svelte": "^2.2.18",
"@nostr-dev-kit/ndk-cache-dexie": "^2.3.1",
+ "@nostr-dev-kit/ndk-svelte": "^2.2.18",
"@radroots/capacitor-native-settings": "workspace:*",
"@radroots/capacitor-secure-storage": "workspace:*",
"@radroots/capacitor-sqlite": "workspace:*",
@@ -57,6 +58,7 @@
"@radroots/client": "workspace:*",
"@radroots/jeep-sqlite": "workspace:*",
"@radroots/svelte-lib": "workspace:*",
+ "@radroots/svelte-maplibre": "workspace:*",
"@radroots/theme": "workspace:*",
"@radroots/utils": "workspace:*",
"sql.js": "^1.11.0"
diff --git a/src/lib/components/map_control_full.svelte b/src/lib/components/map_control_full.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+ import { goto } from "$app/navigation";
+ import { glyph as Glyph } from "@radroots/svelte-lib";
+
+ let el_zoom: HTMLElement | null;
+ /*
+<button
+ class={`surface-1 flex flex-row h-8 w-8 justify-center items-center rounded-2xl`}
+ on:click={async () => {
+ const zoom_to = zoom_step($map_full_zoom, `dec`);
+ console.log(`zoom_to `, zoom_to);
+ map_full_zoom.set(zoom_to);
+ }}
+ >
+ <Glyph
+ basis={{
+ key: `minus`,
+ dim: `sm-`,
+ classes: `text-layer-2-glyph`,
+ }}
+ />
+ </button>
+ */
+</script>
+
+<div
+ bind:this={el_zoom}
+ class={`z-10 absolute top-16 left-6 flex flex-col w-full gap-8 justify-start items-start`}
+>
+ <button
+ class={`surface-1 flex flex-row h-8 w-8 justify-center items-center rounded-2xl`}
+ on:click={async () => {
+ await goto(`/`);
+ }}
+ >
+ <Glyph
+ basis={{
+ key: `caret-left`,
+ dim: `sm-`,
+ weight: `bold`,
+ classes: `text-layer-2-glyph`,
+ }}
+ />
+ </button>
+</div>
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
@@ -25,3 +25,6 @@ export const app_nav_visible = writable<boolean>(false);
//export const app_nav_title = writable<NavParamTitle | false>(false);
export const app_init_route = writable<string>(``);
+
+export const map_full_center = writable<[number, number]>([0, 0]);
+export const map_full_zoom = writable<number>(4);
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
@@ -2,9 +2,12 @@
import { goto } from "$app/navigation";
import Tabs from "$lib/components/tabs.svelte";
import { app_layout, app_tab_active, app_tabs_visible } from "$lib/stores";
+ import LayoutWindow from "$lib/components/layout-window.svelte";
</script>
-<slot />
+<LayoutWindow>
+ <slot />
+</LayoutWindow>
{#if $app_tabs_visible}
<Tabs
basis={{
@@ -19,9 +22,9 @@
},
},
{
- icon: `key`,
+ icon: `compass`,
callback: async (tab_i) => {
- //
+ await goto(`/map`)
},
},
{
diff --git a/src/routes/(app)/models/trade-product/+page.svelte b/src/routes/(app)/models/trade-product/+page.svelte
@@ -58,13 +58,14 @@
label: {
left: [
{
- value: `Name:`,
+ value: `Kind:`,
classes: `capitalize`,
},
],
right: [
{
value: li.key,
+ classes: `capitalize`,
},
],
},
diff --git a/src/routes/(map)/map/+layout.svelte b/src/routes/(map)/map/+layout.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+ import MapControlFull from "$lib/components/map_control_full.svelte";
+</script>
+
+<MapControlFull />
+<slot />
diff --git a/src/routes/(map)/map/+page.svelte b/src/routes/(map)/map/+page.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+ import { map_full_center } from "$lib/stores";
+ import { MapLibre } from "@radroots/svelte-maplibre";
+ import { onMount } from "svelte";
+
+ let el: any;
+
+ onMount(async () => {
+ try {
+ /*
+ const loc = await lc.geo.current();
+ if (loc && typeof loc !== `string`) {
+ const tup: [number, number] = [loc.lng, loc.lat];
+ console.log(`tup `, tup);
+ map_full_center.set(tup);
+ }
+ */
+ } catch (e) {
+ console.log(`e `, e);
+ } finally {
+ }
+ });
+</script>
+
+<MapLibre
+ bind:this={el}
+ center={$map_full_center}
+ class="map-full"
+ style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+/>
+
+<style>
+ :global(.map-full) {
+ height: 100vh;
+ }
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -6,7 +6,6 @@
PUBLIC_NOSTR_RELAY_DEFAULTS,
} from "$env/static/public";
import { lc } from "$lib/client";
- import LayoutWindow from "$lib/components/layout-window.svelte";
import { _cf } from "$lib/conf";
import {
app_config,
@@ -19,6 +18,7 @@
app_thc,
app_thm,
app_win,
+ map_full_center,
} from "$lib/stores";
import {
css_static as CssStatic,
@@ -136,6 +136,10 @@
await lc.preferences.remove(_cf.pref.key_active);
await goto(`/conf/nostr`);
}
+
+ const pos = await lc.geo.current();
+ if (pos && typeof pos !== `string`)
+ map_full_center.set([pos.lng, pos.lat]);
} catch (e) {
console.log(`(app_config) error `, e);
} finally {
@@ -170,9 +174,7 @@
<meta property="og:description" content={_cf.app.description} />
</svelte:head>
{#if $app_render}
- <LayoutWindow>
- <slot />
- </LayoutWindow>
+ <slot />
{/if}
<CssStatic />
<div
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -12,7 +12,7 @@ const heights = {
line: `46px`,
tabs_base: `64px`,
tabs_lg: `86px`,
- nav_base: `67px`,
+ nav_base: `71px`,
nav_lg: `100px`,
};
