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} + Home Marker + + {/if} + {#if saved.work && map.zoom > 9} + Work Marker + + {/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 @@