mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-19 04:49:37 +02:00
feat(map): implement dynamic basemap URL based on theme; update map styles across components
This commit is contained in:
Sean Morley
parent
badeac867d
commit
d4c76f8718
11 changed files with 55 additions and 17 deletions
|
|
@ -1,4 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { getBasemapUrl } from '$lib';
|
||||
import { appVersion } from '$lib/config';
|
||||
import { addToast } from '$lib/toasts';
|
||||
import type { Adventure, Lodging, GeocodeSearchResult, Point, ReverseGeocode } from '$lib/types';
|
||||
|
|
@ -298,7 +299,7 @@
|
|||
<!-- </div> -->
|
||||
<div>
|
||||
<MapLibre
|
||||
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
|
||||
style={getBasemapUrl()}
|
||||
class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full rounded-lg"
|
||||
standardControls
|
||||
zoom={item.latitude && item.longitude ? 12 : 1}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
import { appVersion } from '$lib/config';
|
||||
|
||||
import { DefaultMarker, MapEvents, MapLibre, Popup } from 'svelte-maplibre';
|
||||
import { getBasemapUrl } from '$lib';
|
||||
|
||||
let markers: Point[] = [];
|
||||
|
||||
|
|
@ -106,7 +107,7 @@
|
|||
</form>
|
||||
<h3 class="font-bold text-lg mb-4">Choose a Point</h3>
|
||||
<MapLibre
|
||||
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
|
||||
style={getBasemapUrl()}
|
||||
class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full rounded-lg"
|
||||
standardControls
|
||||
>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
import { appVersion } from '$lib/config';
|
||||
import { DefaultMarker, MapLibre } from 'svelte-maplibre';
|
||||
import DateRangeCollapse from './DateRangeCollapse.svelte';
|
||||
import { getBasemapUrl } from '$lib';
|
||||
|
||||
export let collection: Collection;
|
||||
export let transportationToEdit: Transportation | null = null;
|
||||
|
|
@ -38,7 +39,8 @@
|
|||
destination_latitude: transportationToEdit?.destination_latitude || NaN,
|
||||
destination_longitude: transportationToEdit?.destination_longitude || NaN,
|
||||
start_timezone: transportationToEdit?.start_timezone || '',
|
||||
end_timezone: transportationToEdit?.end_timezone || ''
|
||||
end_timezone: transportationToEdit?.end_timezone || '',
|
||||
distance: null
|
||||
};
|
||||
|
||||
let startTimezone: string | undefined = transportation.start_timezone ?? undefined;
|
||||
|
|
@ -476,7 +478,7 @@
|
|||
{/if}
|
||||
<div class="mt-4">
|
||||
<MapLibre
|
||||
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
|
||||
style={getBasemapUrl()}
|
||||
class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full rounded-lg"
|
||||
standardControls
|
||||
>
|
||||
|
|
|
|||
|
|
@ -584,3 +584,32 @@ export function debounce(func: Function, timeout: number) {
|
|||
}, timeout);
|
||||
};
|
||||
}
|
||||
|
||||
export function getIsDarkMode() {
|
||||
const theme = document.documentElement.getAttribute('data-theme');
|
||||
|
||||
if (theme) {
|
||||
const isDark =
|
||||
theme === 'dark' ||
|
||||
theme === 'night' ||
|
||||
theme === 'aestheticDark' ||
|
||||
theme === 'northernLights' ||
|
||||
theme === 'forest';
|
||||
return isDark;
|
||||
}
|
||||
|
||||
// Fallback to browser preference if no theme cookie is set
|
||||
if (typeof window !== 'undefined' && window.matchMedia) {
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
return prefersDark;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
export function getBasemapUrl() {
|
||||
if (getIsDarkMode()) {
|
||||
return 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
|
||||
}
|
||||
return 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
import AdventureModal from '$lib/components/AdventureModal.svelte';
|
||||
import ImageDisplayModal from '$lib/components/ImageDisplayModal.svelte';
|
||||
import AttachmentCard from '$lib/components/AttachmentCard.svelte';
|
||||
import { isAllDay } from '$lib';
|
||||
import { getBasemapUrl, isAllDay } from '$lib';
|
||||
|
||||
let geojson: any;
|
||||
|
||||
|
|
@ -600,7 +600,7 @@
|
|||
|
||||
<div class="rounded-lg overflow-hidden shadow-lg">
|
||||
<MapLibre
|
||||
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
|
||||
style={getBasemapUrl()}
|
||||
class="w-full h-96"
|
||||
standardControls
|
||||
center={{ lng: adventure.longitude || 0, lat: adventure.latitude || 0 }}
|
||||
|
|
|
|||
|
|
@ -280,14 +280,14 @@
|
|||
{activeView === 'owned'
|
||||
? 'No collections yet'
|
||||
: activeView === 'shared'
|
||||
? 'No shared collections'
|
||||
? 'No shared collections.'
|
||||
: 'No archived collections'}
|
||||
</h3>
|
||||
<p class="text-base-content/50 text-center max-w-md">
|
||||
{activeView === 'owned'
|
||||
? 'Create your first collection to organize your adventures and memories.'
|
||||
: activeView === 'shared'
|
||||
? 'Collections shared with you will appear here.'
|
||||
? 'Make sure your profile is public so others can share with you.'
|
||||
: 'Archived collections will appear here.'}
|
||||
</p>
|
||||
{#if activeView === 'owned'}
|
||||
|
|
@ -429,7 +429,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="space-y-3 mt-6">
|
||||
<!-- <div class="space-y-3 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline w-full gap-2"
|
||||
|
|
@ -438,7 +438,7 @@
|
|||
<Archive class="w-4 h-4" />
|
||||
{$t(`adventures.archived_collections`)}
|
||||
</button>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,8 @@
|
|||
groupChecklistsByDate,
|
||||
osmTagToEmoji,
|
||||
groupLodgingByDate,
|
||||
LODGING_TYPES_ICONS
|
||||
LODGING_TYPES_ICONS,
|
||||
getBasemapUrl
|
||||
} from '$lib';
|
||||
import ChecklistCard from '$lib/components/ChecklistCard.svelte';
|
||||
import ChecklistModal from '$lib/components/ChecklistModal.svelte';
|
||||
|
|
@ -1233,7 +1234,7 @@
|
|||
<div class="card-body">
|
||||
<h2 class="card-title text-3xl justify-center mb-4">Trip Map</h2>
|
||||
<MapLibre
|
||||
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
|
||||
style={getBasemapUrl()}
|
||||
class="aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-full rounded-lg"
|
||||
standardControls
|
||||
>
|
||||
|
|
@ -1459,7 +1460,7 @@
|
|||
|
||||
{#if recomendationsData}
|
||||
<MapLibre
|
||||
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
|
||||
style={getBasemapUrl()}
|
||||
class="aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max
|
||||
-h-full w-full rounded-lg"
|
||||
standardControls
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
import type { Adventure, VisitedRegion } from '$lib/types.js';
|
||||
import CardCarousel from '$lib/components/CardCarousel.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { getBasemapUrl } from '$lib';
|
||||
export let data;
|
||||
|
||||
let createModalOpen: boolean = false;
|
||||
|
|
@ -117,7 +118,7 @@
|
|||
{/if}
|
||||
|
||||
<MapLibre
|
||||
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
|
||||
style={getBasemapUrl()}
|
||||
class="mx-auto aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-10/12 rounded-lg"
|
||||
standardControls
|
||||
>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
import Check from '~icons/mdi/check-circle';
|
||||
import Progress from '~icons/mdi/progress-check';
|
||||
import Cancel from '~icons/mdi/cancel';
|
||||
import { getBasemapUrl } from '$lib';
|
||||
|
||||
export let data: PageData;
|
||||
console.log(data);
|
||||
|
|
@ -230,7 +231,7 @@
|
|||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body p-4">
|
||||
<MapLibre
|
||||
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
|
||||
style={getBasemapUrl()}
|
||||
class="aspect-[16/10] w-full rounded-lg"
|
||||
standardControls
|
||||
zoom={2}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
import Trophy from '~icons/mdi/trophy';
|
||||
import Target from '~icons/mdi/target';
|
||||
import Flag from '~icons/mdi/flag';
|
||||
import { getBasemapUrl } from '$lib';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
|
|
@ -281,7 +282,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<MapLibre
|
||||
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
|
||||
style={getBasemapUrl()}
|
||||
class="aspect-[16/10] w-full rounded-lg"
|
||||
standardControls
|
||||
center={[regions[0]?.longitude || 0, regions[0]?.latitude || 0]}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { getBasemapUrl } from '$lib';
|
||||
import CityCard from '$lib/components/CityCard.svelte';
|
||||
import { addToast } from '$lib/toasts';
|
||||
import type { City } from '$lib/types';
|
||||
|
|
@ -102,7 +103,7 @@
|
|||
<!-- checkbox to toggle marker -->
|
||||
|
||||
<MapLibre
|
||||
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
|
||||
style={getBasemapUrl()}
|
||||
class="aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-10/12 rounded-lg"
|
||||
standardControls
|
||||
center={allCities[0] && allCities[0].longitude !== null && allCities[0].latitude !== null
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue