diff --git a/public/img/saved/home.png b/public/img/saved/home.png new file mode 100644 index 0000000..42cf8fb Binary files /dev/null and b/public/img/saved/home.png differ diff --git a/public/img/saved/work.png b/public/img/saved/work.png new file mode 100644 index 0000000..80bd480 Binary files /dev/null and b/public/img/saved/work.png differ diff --git a/src/lib/components/lnv/Map.svelte b/src/lib/components/lnv/Map.svelte index 887c1f9..0491ff2 100644 --- a/src/lib/components/lnv/Map.svelte +++ b/src/lib/components/lnv/Map.svelte @@ -15,6 +15,7 @@ } from "$lib/services/navigation/routing.svelte"; import { location } from "./location.svelte"; import { protocol } from "$lib/services/OfflineTiles"; + import { saved } from "$lib/saved.svelte"; onMount(() => { window.addEventListener("resize", map.updateMapPadding); @@ -23,6 +24,8 @@ let locationDot: HTMLDivElement | undefined = $state(); let locationAccuracyCircle: HTMLDivElement | undefined = $state(); + let homeMarker: HTMLImageElement | undefined = $state(); + let workMarker: HTMLImageElement | undefined = $state(); const DEBUG_POINTS = false; // Set to true to show debug points on the map @@ -63,6 +66,7 @@ class="w-full h-full" style="/style.json" bind:map={map.value} + bind:zoom={map.zoom} padding={map.padding} onload={async () => { map.updateMapPadding(); @@ -119,7 +123,7 @@ enableHighAccuracy: true, }} trackUserLocation={true} - autoTrigger={true} + autoTrigger={true}"" ongeolocate={(e: GeolocationPosition) => { const speed = Math.round((e.coords.speed || 0) * 3.6); // In km/h const accuracy = Math.round(e.coords.accuracy); @@ -133,6 +137,36 @@ {#if pin.isDropped} {/if} + {#if saved.home && map.zoom > 9} + + + {/if} + {#if saved.work && map.zoom > 9} + + + {/if} {#if routing.geojson.routePast} diff --git a/src/lib/components/lnv/map.svelte.ts b/src/lib/components/lnv/map.svelte.ts index bacb900..b68eebb 100644 --- a/src/lib/components/lnv/map.svelte.ts +++ b/src/lib/components/lnv/map.svelte.ts @@ -7,6 +7,7 @@ import { view } from "./sidebar.svelte"; export const map = $state({ value: undefined as maplibregl.Map | undefined, + zoom: 0, updateMapPadding: () => { if (document.querySelector("#sidebar") == null) { map._setPadding({ diff --git a/src/lib/components/lnv/sidebar/InfoSidebar.svelte b/src/lib/components/lnv/sidebar/InfoSidebar.svelte index 3910851..ab8342e 100644 --- a/src/lib/components/lnv/sidebar/InfoSidebar.svelte +++ b/src/lib/components/lnv/sidebar/InfoSidebar.svelte @@ -21,6 +21,7 @@ import Reviews from "../info/Reviews.svelte"; import MapAi from "../info/MapAI.svelte"; import RequiresCapability from "../RequiresCapability.svelte"; + import { saved, saveLocations } from "$lib/saved.svelte"; // let { feature }: { feature: Feature } = $props(); @@ -170,10 +171,12 @@ { - localStorage.setItem( - "saved.home", - JSON.stringify({ lat, lon: lng }), - ); + // localStorage.setItem( + // "saved.home", + // JSON.stringify({ lat, lon: lng }), + // ); + saved.home = { lat, lon: lng }; + saveLocations(); }} > @@ -182,10 +185,12 @@ { - localStorage.setItem( - "saved.work", - JSON.stringify({ lat, lon: lng }), - ); + // localStorage.setItem( + // "saved.work", + // JSON.stringify({ lat, lon: lng }), + // ); + saved.work = { lat, lon: lng }; + saveLocations(); }} > diff --git a/src/lib/components/lnv/sidebar/MainSidebar.svelte b/src/lib/components/lnv/sidebar/MainSidebar.svelte index 3a78e1b..c0c65a0 100644 --- a/src/lib/components/lnv/sidebar/MainSidebar.svelte +++ b/src/lib/components/lnv/sidebar/MainSidebar.svelte @@ -7,6 +7,7 @@ import VehicleSelector from "../VehicleSelector.svelte"; import Post from "../Post.svelte"; import RequiresCapability from "../RequiresCapability.svelte"; + import { saved } from "$lib/saved.svelte"; { - const home = localStorage.getItem("saved.home"); - if (!home) { + const { lat, lon } = saved.home; + if (!lat || !lon) { alert("No home location saved."); return; } - const { lat, lon } = JSON.parse(home); pin.dropPin(lat, lon); pin.showInfo(); map.value?.flyTo({ @@ -39,12 +39,11 @@ variant="secondary" class="flex-1" onclick={() => { - const work = localStorage.getItem("saved.work"); - if (!work) { + const { lat, lon } = saved.work; + if (!lat || !lon) { alert("No work location saved."); return; } - const { lat, lon } = JSON.parse(work); pin.dropPin(lat, lon); pin.showInfo(); map.value?.flyTo({ diff --git a/src/lib/saved.svelte.ts b/src/lib/saved.svelte.ts new file mode 100644 index 0000000..5fb1de7 --- /dev/null +++ b/src/lib/saved.svelte.ts @@ -0,0 +1,7 @@ +export const saved: Record = $state( + JSON.parse(localStorage.getItem("saved") ?? "{}"), +); + +export function saveLocations() { + localStorage.setItem("saved", JSON.stringify(saved)); +}