[v0.12.0 pre] Planning & Itinerary Overhaul, Recommendation Engine, OIDC Enhancements, and More (#931)
* Fixes [REQUEST] Email-based auto-linking for OIDC Fixes #921 * Add ClusterMap integration for regions and cities with fit-to-bounds functionality * Update COUNTRY_REGION_JSON_VERSION to v3.0 and modify state ID generation to use ISO2 code * fix: handle email verification required case during signup Updated the signup action to return a specific message when the backend responds with a 401 status, indicating that the signup succeeded but email verification is required. This allows the frontend to display the appropriate message using an i18n key. * feat: add Advanced Configuration documentation with optional environment variables * Fixes #511 * fix: update appVersion to v0.11.0-main-121425 and enhance socialProviders handling in settings page * feat: implement social signup controls and update documentation for new environment variables * fix: update LocationCard props and enhance restore data functionality - Changed the user prop to null in LocationCard component on the dashboard page. - Added isRestoring state to manage loading state during data restoration in settings. - Updated the restore button to show a loading spinner when a restore operation is in progress. * fix: update appVersion to v0.12.0-pre-dev-121625 * feat: implement itinerary planning feature with CollectionItineraryPlanner component and related updates * feat: add overnight lodging indicator and functionality to CollectionItineraryPlanner * feat: add compact display option to LocationCard and enhance lodging filtering in CollectionItineraryPlanner * feat(itinerary): add itinerary management features and link modal - Introduced ItineraryViewSet for managing itinerary items with create and reorder functionalities. - Added itinerary linking capabilities in CollectionModal and CollectionItineraryPlanner components. - Implemented new ItineraryLinkModal for linking existing items to specific dates. - Enhanced the frontend with new modals for creating locations, lodging, transportation, notes, and checklists. - Updated the backend to handle itinerary item creation and reordering with appropriate permissions. - Improved data handling for unscheduled items and their association with the itinerary. - Added new dependencies to the frontend for enhanced functionality. * feat(itinerary): implement auto-generate functionality for itinerary items based on dated records * feat(collection): enhance collection sharing logic and improve data handling on invite acceptance * fix: update appVersion to correct pre-dev version * feat(wikipedia): implement image selection from Wikipedia with enhanced results display * Refactor code structure for improved readability and maintainability * feat: add CollectionRecommendationView component for displaying location recommendations - Implemented CollectionRecommendationView.svelte to handle location recommendations based on user input and selected categories. - Added Recommendation and RecommendationResponse types to types.ts for better type safety and structure. - Updated collections/[id]/+page.svelte to include a new view for recommendations, allowing users to switch between different views seamlessly. * fix: update appVersion and improve button accessibility in collection views * feat: add canModify prop to collection components for user permission handling * feat: add itinerary removal functionality to various cards and update UI components - Implemented `removeFromItinerary` function in `LodgingCard`, `NoteCard`, and `TransportationCard` to allow users to remove items from their itinerary. - Replaced the trash icon with a calendar remove icon in `LocationCard`, `LodgingCard`, `NoteCard`, and `TransportationCard` for better visual representation. - Updated the dropdown menus in `LodgingCard`, `NoteCard`, and `TransportationCard` to include the new remove from itinerary option. - Enhanced `CollectionItineraryPlanner` to pass itinerary items to the respective cards. - Removed `PointSelectionModal.svelte` as it is no longer needed. - Refactored `LocationMedia.svelte` to integrate `ImageManagement` component and clean up unused code related to image handling. * feat: enhance itinerary management with deduplication and initial visit date handling * feat: add FullMap component for enhanced map functionality with clustering support - Introduced FullMap.svelte to handle map rendering, clustering, and marker management. - Updated map page to utilize FullMap component, replacing direct MapLibre usage. - Implemented clustering options and marker properties handling in FullMap. - Added utility functions for resolving theme colors and managing marker states. - Enhanced user experience with hover popups and improved loading states for location details. - Updated app version to v0.12.0-pre-dev-122225. * feat: enhance map interaction for touch devices with custom popup handling * feat: add progress tracker for folder views to display visited and planned locations * feat: add map center and zoom state management with URL synchronization * feat: add status and days until start fields to collections with filtering options * Component folder structure changes * feat: add LodgingMedia and LodgingModal components for managing lodging details and media attachments feat: implement LocationSearchMap component for interactive location searching and mapping functionality * fix: update contentType in ImageManagement component to 'lodging' for correct media handling * feat: enhance lodging management with date validation and update messages * feat: implement lodging detail page with server-side loading and image modal functionality - Added a new server-side load function to fetch lodging details by ID. - Created a new Svelte component for the lodging detail page, including image carousel and map integration. - Implemented a modal for displaying images with navigation. - Enhanced URL handling in the locations page to only read parameters. * feat: add Transportation modal component and related routes - Implemented TransportationModal component for creating and editing transportation entries. - Added server-side loading for transportation details in the new route [id]/+page.server.ts. - Created a new Svelte page for displaying transportation details with image and attachment handling. - Integrated modal for editing transportation in the transportation details page. - Updated lodging routes to include a modal for editing lodging entries. - Removed unused delete action from lodging server-side logic. * feat: add start_code and end_code fields to Transportation model and update related components * feat: implement date validation for itinerary items and add day picker modal for scheduling * Reorder town and county checks in geocoding.py Fix detection if only town exists for a location but county is no city name * Use address keys only if city is found * Make sure reverse geocoding uses correct key for cities (#938) * Reorder town and county checks in geocoding.py Fix detection if only town exists for a location but county is no city name * Use address keys only if city is found * Refactor code structure for improved readability and maintainability * Enhance collection management with modal updates and item handling * feat: integrate CollectionMap component in collections page and update map titles in lodging and transportation pages - Replaced inline map implementation with CollectionMap component in collections/[id]/+page.svelte for better modularity. - Updated the map title in lodging/[id]/+page.svelte to reflect lodging context. - Updated the map title in transportations/[id]/+page.svelte to reflect transportation context. - Added functionality to collect and render GeoJSON data from transportation attachments in transportations/[id]/+page.svelte. * chore: update copyright year to 2026 in various files * feat: enhance backup export functionality with itinerary items and export IDs * fix: improve dropdown close behavior by handling multiple event types * fix: remove unnecessary cache decorator from globespin function * feat: add initial visit date support in ChecklistModal and NoteModal, with UI suggestions for prefilled dates * feat: add details view for checklist and note cards with edit functionality * feat: add travel duration and GPX distance calculation to Transportation model and UI * feat: add primary image support to Collection model, serializers, and UI components * Refactor calendar components and enhance event detail handling - Replaced direct calendar implementation with a reusable CalendarComponent in the calendar route. - Introduced EventDetailsModal for displaying event details, improving modularity and readability. - Added functionality to fetch event details asynchronously when an event is clicked. - Implemented ICS calendar download functionality with loading state management. - Enhanced collections page to support calendar view, integrating event handling and timezone management. - Improved lodging and transportation pages to display local time for stays and trips, including timezone badges. - Cleaned up unused code and comments for better maintainability. * feat: enhance hero image handling in collection view by prioritizing primary image * chore: update .env.example to include account email verification configuration * feat: enhance LodgingCard and TransportationCard components with expandable details and improved layout * feat: add price and currency fields to locations, lodging, and transportation components - Introduced price and price_currency fields in LocationModal, LodgingDetails, LodgingModal, TransportationDetails, and TransportationModal components. - Implemented MoneyInput and CurrencyDropdown components for handling monetary values and currency selection. - Updated data structures and types to accommodate new price and currency fields across various models. - Enhanced cost summary calculations in collections and routes to display total costs by currency. - Added user preference for default currency in settings, affecting new item forms. - Updated UI to display price information in relevant components, ensuring consistent formatting and user experience. * feat: add Development Timeline link to overview and create timeline documentation * feat: enhance map functionality with search and zoom features - Updated availableViews in collection page to include map view based on lodging and transportation locations. - Added search functionality to the map page, allowing users to filter pins by name and category. - Implemented auto-zoom feature to adjust the map view based on filtered search results. - Introduced a search bar with a clear button for better user experience. * feat: enhance ISO code extraction and region matching logic in extractIsoCode function * feat: enhance extractIsoCode function with normalization for locality matching * feat: update extractIsoCode function to include additional ISO3166 levels for improved region matching * feat: enhance extractIsoCode function to handle cases without city information and update CollectionMap to bind user data * feat: add cron job for syncing visited regions and cities, enhance Docker and supervisord configurations * feat: add CollectionItineraryDay model and related functionality for itinerary day metadata management * feat: implement cleanup of out-of-range itinerary items and notify users of potential impacts on itinerary when dates change * Refactor collection page for improved localization and code clarity - Removed unused imports and consolidated cost category labels to be reactive. - Updated cost summary function to accept localized labels. - Enhanced localization for various UI elements, including buttons, headings, and statistics. - Improved user feedback messages for better clarity and consistency. - Ensured all relevant text is translatable using the i18n library. * feat: add collaborator serialization and display in collections - Implemented `_build_profile_pic_url` and `_serialize_collaborator` functions for user profile picture URLs and serialization. - Updated `CollectionSerializer` and `UltraSlimCollectionSerializer` to include collaborators in the serialized output. - Enhanced `CollectionViewSet` to prefetch shared_with users for optimized queries. - Modified frontend components to display collaborators in collection details, including profile pictures and initials. - Added new localization strings for collaborators. - Refactored map and location components to improve usability and functionality. - Updated app version to reflect new changes. * feat: add dynamic lodging icons based on type in CollectionMap component * feat: add CollectionStats component for detailed trip statistics - Implemented CollectionStats.svelte to display various statistics related to the collection, including distances, activities, and locations visited. - Enhanced CollectionMap.svelte to filter activities based on date range using new getActivityDate function. - Updated LocationSearchMap.svelte to handle airport mode for start and end locations. - Modified types.ts to include is_global property in CollectionItineraryItem for trip-wide items. - Updated +page.svelte to integrate the new stats view and manage view state accordingly. * feat: enhance itinerary management by removing old items on date change for notes and checklists; normalize date handling in CollectionMap * feat: add functionality to change day and move items to trip-wide itinerary - Implemented changeDay function in ChecklistCard, LocationCard, LodgingCard, NoteCard, and TransportationCard components to allow users to change the scheduled day of items. - Added a button to move items to the global (trip-wide) itinerary in the aforementioned components, with appropriate dispatch events. - Enhanced CollectionItineraryPlanner to handle moving items to the global itinerary and added UI elements for unscheduled items. - Updated ItineraryDayPickModal to support the deletion of source visits when moving locations. - Added new translations for "Change Day" and "Move Trip Wide" in the English locale. * fix: specify full path for python3 in cron job and add shell and path variables * fix: update appVersion to v0.12.0-pre-dev-010726 * feat: enhance CollectionItineraryPlanner and CollectionStats with dynamic links and transport type normalization * Add Dev Container + WSL install docs and link in install guide (#944) (#951) * feat: enhance internationalization support in CollectionMap and CollectionStats components - Added translation support for various labels and messages in CollectionMap.svelte and CollectionStats.svelte using svelte-i18n. - Updated English and Chinese locale files to include new translation keys for improved user experience. - Simplified the rendering of recommendation views in the collections page. * Refactor itinerary management and UI components - Updated ItineraryViewSet to handle visit updates and creations more efficiently, preserving visit IDs when moving between days. - Enhanced ChecklistCard, LodgingCard, TransportationCard, and NoteCard to include a new "Change Day" option in the actions menu. - Improved user experience in CollectionItineraryPlanner by tracking specific itinerary items being moved and ensuring only the relevant entries are deleted. - Added new location sharing options in LodgingCard and TransportationCard for Apple Maps, Google Maps, and OpenStreetMap. - Updated translations in en.json for consistency and clarity. - Minor UI adjustments for better accessibility and usability across various components. * feat: implement action menus and close event handling in card components * feat: refactor Dockerfile and supervisord configuration to remove cron and add periodic sync script * feat: enhance LocationSearchMap and TransportationDetails components with initialization handling and airport mode logic * feat: add airport and location search mode labels to localization file * feat: enhance periodic sync logging and improve airport mode handling in LocationSearchMap * feat: enhance unscheduled items display with improved card interactions and accessibility * Add dev compose for hot reload and update WSL dev container docs (#958) * feat: enhance localization for itinerary linking and transportation components * Localization: update localization files with new keys and values * fix: improve error messages for Overpass API responses * chore: update dependencies in frontend package.json and pnpm-lock.yaml - Updated @sveltejs/adapter-node from ^5.2.12 to ^5.4.0 - Updated @sveltejs/adapter-vercel from ^5.7.0 to ^6.3.0 - Updated tailwindcss from ^3.4.17 to ^3.4.19 - Updated typescript from ^5.8.3 to ^5.9.3 - Updated vite from ^5.4.19 to ^5.4.21 * chore: update dependencies in pnpm-lock.yaml to latest versions * Refactor code structure for improved readability and maintainability * Refactor code structure for improved readability and maintainability * fix: update package dependencies to resolve compatibility issues * Add "worldtravel" translations to multiple locale files - Added "worldtravel" key with translations for Spanish, French, Hungarian, Italian, Japanese, Korean, Dutch, Norwegian, Polish, Brazilian Portuguese, Russian, Slovak, Swedish, Turkish, Ukrainian, and Chinese. - Updated the navigation section in each locale file to include the new "worldtravel" entry. * Add new screenshots and update email verification message in locale file * feat: Implement data restoration functionality with file import - Added a new action `restoreData` in `+page.server.ts` to handle file uploads for restoring collections. - Enhanced the UI in `+page.svelte` to include an import button and a modal for import progress. - Integrated file input handling to trigger form submission upon file selection. - Removed unused GSAP animations from the login, profile, and signup pages for cleaner code. * feat: Add modals for creating locations and lodging from recommendations, enhance image import functionality * fix: Adjust styles to prevent horizontal scroll and enhance floating action button visibility * feat: Enhance error handling and messaging for Google Maps and OpenStreetMap geocoding functions * fix: Enhance error messaging for Google Maps access forbidden response * feat: Add User-Agent header to Google Maps API requests and refine error messaging for access forbidden response * fix: Update User-Agent header in Google Maps API requests for improved compatibility * fix: Disable proxy settings in Google Maps API request to prevent connection issues * fix: Update Trivy security scan configuration and add .trivyignore for known false positives * fix: Refactor update method to handle is_public cascading for related items * feat: Integrate django-invitations for user invitation management and update settings * feat: Add Tailwind CSS and DaisyUI plugin for styling * feat: Add Tailwind CSS and DaisyUI plugin for styling * feat: Add "Invite a User" guide and update navigation links * docs: Update "Invite a User" guide to include email configuration tip * feat: Update email invitation template for improved styling and clarity * fix: Remove trailing backslash from installation note in Unraid documentation * feat: Add export/import messages and user email verification prompts in multiple languages * Squashed commit of the following: commit a993a15b93ebb7521ae2e5cc31596b98b29fcd6c Author: Alex <div@alexe.at> Date: Mon Jan 12 20:44:47 2026 +0100 Translated using Weblate (German) Currently translated at 100.0% (1048 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/de/ commit fdc455d9424fbb0f6b72179d9eb1340411700773 Author: Ettore Atalan <atalanttore@googlemail.com> Date: Sat Jan 10 23:24:23 2026 +0100 Translated using Weblate (German) Currently translated at 100.0% (1048 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/de/ commit 5942129c55e89dd999a13d4df9c40e6e3189355c Author: Orhun <orhunavcu@gmail.com> Date: Sun Jan 11 13:05:31 2026 +0100 Translated using Weblate (Turkish) Currently translated at 100.0% (1048 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/tr/ commit 8712e43d8ba4a7e7fe163fb454d6577187f9a375 Author: Henrique Fonseca Veloso <henriquefv@tutamail.com> Date: Fri Jan 9 22:53:11 2026 +0100 Translated using Weblate (Portuguese (Brazil)) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/pt_BR/ commit 18ee56653470413afe8d71ecd2b5028f6e4cf118 Author: Anonymous <noreply@weblate.org> Date: Fri Jan 9 22:52:57 2026 +0100 Translated using Weblate (Dutch) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/nl/ commit 57783c544e583c035c8b57b5c10ca320f25f399e Author: Anonymous <noreply@weblate.org> Date: Fri Jan 9 22:52:14 2026 +0100 Translated using Weblate (Arabic) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/ar/ commit fb09edfd85bc85234b1c1ba7dd499f2915093fff Author: Anonymous <noreply@weblate.org> Date: Fri Jan 9 22:52:26 2026 +0100 Translated using Weblate (Spanish) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/es/ commit 554a207d8e454a1f7ae826e2a40d389b94be5512 Author: Anonymous <noreply@weblate.org> Date: Fri Jan 9 22:52:21 2026 +0100 Translated using Weblate (German) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/de/ commit b70b9db27fb8607beefeb288185601c8f5eae28d Author: Anonymous <noreply@weblate.org> Date: Fri Jan 9 22:53:02 2026 +0100 Translated using Weblate (Norwegian Bokmål) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/nb_NO/ commit 3b467caa9007c553e4ae7de97f53b6e462161ea3 Author: Anonymous <noreply@weblate.org> Date: Fri Jan 9 22:53:07 2026 +0100 Translated using Weblate (Polish) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/pl/ commit 30fbbfba3572c8f78ec7c7e1a231e363aca1ef10 Author: Anonymous <noreply@weblate.org> Date: Fri Jan 9 22:53:17 2026 +0100 Translated using Weblate (Russian) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/ru/ commit 8cecb492cfcac0a1f93ee8919f7b41d978d331ee Author: Anonymous <noreply@weblate.org> Date: Fri Jan 9 22:52:42 2026 +0100 Translated using Weblate (Italian) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/it/ commit f0d3d41029c89bfa83d5891ee7af70241f27b7be Author: Anonymous <noreply@weblate.org> Date: Fri Jan 9 22:52:38 2026 +0100 Translated using Weblate (Hungarian) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/hu/ commit 102e0f1912d010d38755a1713abb2a7f7564aafb Author: Anonymous <noreply@weblate.org> Date: Fri Jan 9 22:53:21 2026 +0100 Translated using Weblate (Slovak) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/sk/ commit 428b8f18cf6195a96b55109e0221413d82415a2f Author: Максим Горпиніч <gorpinicmaksim0@gmail.com> Date: Sat Jan 10 08:55:28 2026 +0100 Translated using Weblate (Ukrainian) Currently translated at 100.0% (1048 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/uk/ commit 1a71aaf279ecab26c0c1fede05025732e6dcfa5e Author: Anonymous <noreply@weblate.org> Date: Fri Jan 9 22:53:27 2026 +0100 Translated using Weblate (Swedish) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/sv/ commit 36ec3701f3a1a904e7c42ac4ffbe6a050dc6d1ed Author: Anonymous <noreply@weblate.org> Date: Fri Jan 9 22:53:43 2026 +0100 Translated using Weblate (Chinese (Simplified Han script)) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/zh_Hans/ commit 65d8b74b340c877cad2028b7142c783a1b568d49 Author: Anonymous <noreply@weblate.org> Date: Fri Jan 9 22:52:48 2026 +0100 Translated using Weblate (Japanese) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/ja/ commit 4d11d1d31022583657e93aee70301a8ffcde1340 Author: Anonymous <noreply@weblate.org> Date: Fri Jan 9 22:52:52 2026 +0100 Translated using Weblate (Korean) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/ko/ commit bd1135bcb965ad73cf493771b15081cc97cf513a Author: Orhun <orhunavcu@gmail.com> Date: Fri Jan 9 22:53:33 2026 +0100 Translated using Weblate (Turkish) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/tr/ commit 2c3d814119f4cf2dabd20933699f5b991f20f3e6 Author: Anonymous <noreply@weblate.org> Date: Fri Jan 9 22:52:32 2026 +0100 Translated using Weblate (French) Currently translated at 99.9% (1047 of 1048 strings) Translation: AdventureLog/Web App Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/fr/ * Refactor code structure and remove redundant code blocks for improved readability and maintainability * fix: Correct appVersion to match the latest pre-release version * fix: Add missing vulnerability reference for jaraco.context in .trivyignore --------- Co-authored-by: Lars Lehmann <33843261+larsl-net@users.noreply.github.com> Co-authored-by: Lars Lehmann <lars@lmail.eu> Co-authored-by: Nick Petrushin <n.a.petrushin@gmail.com>
This commit is contained in:
Sean Morley
381
frontend/src/lib/components/map/FullMap.svelte
Normal file
381
frontend/src/lib/components/map/FullMap.svelte
Normal file
@@ -0,0 +1,381 @@
|
||||
<script lang="ts" context="module">
|
||||
export type FullMapPointGeometry = {
|
||||
type: 'Point';
|
||||
coordinates: [number, number];
|
||||
};
|
||||
|
||||
export type FullMapFeature<P = Record<string, unknown>> = {
|
||||
type: 'Feature';
|
||||
geometry: FullMapPointGeometry;
|
||||
properties: P;
|
||||
};
|
||||
|
||||
export type FullMapFeatureCollection<P = Record<string, unknown>> = {
|
||||
type: 'FeatureCollection';
|
||||
features: FullMapFeature<P>[];
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { CircleLayer, GeoJSON, MapEvents, MapLibre, MarkerLayer } from 'svelte-maplibre';
|
||||
import type { ClusterOptions, LayerClickInfo } from 'svelte-maplibre';
|
||||
import { getBasemapUrl } from '$lib';
|
||||
import MapStyleSelector from '$lib/components/map/MapStyleSelector.svelte';
|
||||
import { resolveThemeColor, withAlpha } from '$lib/utils/resolveThemeColor';
|
||||
|
||||
type Feature = FullMapFeature;
|
||||
type FeatureCollection = FullMapFeatureCollection;
|
||||
|
||||
// Generic item input (optional). If you provide `items` + `toFeature`, FullMap builds the GeoJSON.
|
||||
export let items: unknown[] = [];
|
||||
export let toFeature: ((item: unknown) => Feature | null) | null = null;
|
||||
|
||||
// Or pass prebuilt GeoJSON.
|
||||
export let geoJson: FeatureCollection = { type: 'FeatureCollection', features: [] };
|
||||
|
||||
// Map presentation
|
||||
export let mapClass = 'w-full h-full';
|
||||
export let standardControls = true;
|
||||
export let zoom = 2;
|
||||
export let center: [number, number] = [0, 0];
|
||||
export let mapClickEnabled: boolean = true;
|
||||
|
||||
// Basemap
|
||||
export let basemapType: string = 'default';
|
||||
export let showBasemapSelector: boolean = true;
|
||||
|
||||
// GeoJSON source
|
||||
export let sourceId = 'fullmap-source';
|
||||
|
||||
// Clustering
|
||||
export let clusterEnabled: boolean = true;
|
||||
export let clusterOptions: ClusterOptions = { radius: 300, maxZoom: 8, minPoints: 2 };
|
||||
export let expandClusterOnClick: boolean = true;
|
||||
|
||||
// Optional cluster style overrides
|
||||
export let clusterCirclePaint: Record<string, any> | null = null;
|
||||
export let clusterSymbolLayout: Record<string, any> | null = null;
|
||||
export let clusterSymbolPaint: Record<string, any> | null = null;
|
||||
|
||||
// Marker plumbing
|
||||
export let getMarkerProps: (feature: unknown) => Record<string, unknown> | null = (feature) =>
|
||||
feature && typeof feature === 'object' && feature !== null && 'properties' in (feature as any)
|
||||
? ((feature as any).properties as Record<string, unknown>)
|
||||
: null;
|
||||
|
||||
export let getMarkerId: (markerProps: Record<string, unknown> | null) => string | null = (
|
||||
markerProps
|
||||
) => (markerProps && typeof markerProps.id === 'string' ? markerProps.id : null);
|
||||
|
||||
function getPointCoordinates(feature: unknown): [number, number] | null {
|
||||
if (!feature || typeof feature !== 'object') return null;
|
||||
const geometry = (feature as any).geometry as unknown;
|
||||
if (!geometry || typeof geometry !== 'object') return null;
|
||||
const type = (geometry as any).type;
|
||||
const coordinates = (geometry as any).coordinates;
|
||||
if (type !== 'Point' || !Array.isArray(coordinates) || coordinates.length < 2) return null;
|
||||
const lon = Number(coordinates[0]);
|
||||
const lat = Number(coordinates[1]);
|
||||
if (!Number.isFinite(lon) || !Number.isFinite(lat)) return null;
|
||||
return [lon, lat];
|
||||
}
|
||||
|
||||
// Effective GeoJSON (either derived from items or passed directly)
|
||||
let effectiveGeoJson: FeatureCollection = geoJson;
|
||||
$: effectiveGeoJson =
|
||||
toFeature && Array.isArray(items)
|
||||
? {
|
||||
type: 'FeatureCollection',
|
||||
features: items
|
||||
.map((i) => toFeature(i))
|
||||
.filter((f): f is Feature => f !== null) as Feature[]
|
||||
}
|
||||
: geoJson;
|
||||
|
||||
// Map instance
|
||||
let map: any = undefined;
|
||||
|
||||
// When MapLibre's style changes (basemap switch), it drops all custom sources/layers.
|
||||
// Force the GeoJSON/layer subtree to remount after the new style finishes loading.
|
||||
let styleNonce = 0;
|
||||
let lastBasemapType: string | null = null;
|
||||
$: if (map && lastBasemapType !== basemapType) {
|
||||
lastBasemapType = basemapType;
|
||||
|
||||
const m = map as any;
|
||||
const bump = () => {
|
||||
styleNonce += 1;
|
||||
};
|
||||
|
||||
if (typeof m?.once === 'function') {
|
||||
m.once('style.load', bump);
|
||||
} else if (typeof m?.on === 'function' && typeof m?.off === 'function') {
|
||||
const handler = () => {
|
||||
m.off('style.load', handler);
|
||||
bump();
|
||||
};
|
||||
m.on('style.load', handler);
|
||||
} else {
|
||||
// Fallback: at least trigger a remount.
|
||||
bump();
|
||||
}
|
||||
}
|
||||
|
||||
// Active marker tracking (used for map-level z-index + slot convenience)
|
||||
let activeMarkerId: string | null = null;
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
mapClick: { lngLat: { lng: number; lat: number } };
|
||||
markerClick: { feature: unknown; markerProps: Record<string, unknown> | null };
|
||||
clusterClick: LayerClickInfo;
|
||||
mapMove: { center: { lng: number; lat: number }; zoom: number };
|
||||
}>();
|
||||
|
||||
function handleMapClick(e: CustomEvent<{ lngLat: { lng: number; lat: number } }>) {
|
||||
dispatch('mapClick', e.detail);
|
||||
}
|
||||
|
||||
function handleMapMove() {
|
||||
if (!map) return;
|
||||
const mapCenter = map.getCenter();
|
||||
const mapZoom = map.getZoom();
|
||||
if (mapCenter && typeof mapZoom === 'number') {
|
||||
dispatch('mapMove', {
|
||||
center: { lng: mapCenter.lng, lat: mapCenter.lat },
|
||||
zoom: mapZoom
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function setBasemapType(next: string) {
|
||||
basemapType = next;
|
||||
}
|
||||
|
||||
// Theme-aware cluster styling (defaults to semantic daisyUI tokens)
|
||||
let clusterBaseContent = '#111827';
|
||||
let clusterInfo = '#38bdf8';
|
||||
let clusterWarning = '#f59e0b';
|
||||
let clusterError = '#f87171';
|
||||
let clusterInfoContent = '#082f49';
|
||||
let clusterWarningContent = '#111827';
|
||||
let clusterErrorContent = '#450a0a';
|
||||
|
||||
onMount(() => {
|
||||
clusterBaseContent = resolveThemeColor('--color-base-content', clusterBaseContent);
|
||||
clusterInfo = resolveThemeColor('--color-info', clusterInfo);
|
||||
clusterWarning = resolveThemeColor('--color-warning', clusterWarning);
|
||||
clusterError = resolveThemeColor('--color-error', clusterError);
|
||||
clusterInfoContent = resolveThemeColor('--color-info-content', clusterInfoContent);
|
||||
clusterWarningContent = resolveThemeColor('--color-warning-content', clusterWarningContent);
|
||||
clusterErrorContent = resolveThemeColor('--color-error-content', clusterErrorContent);
|
||||
});
|
||||
|
||||
let resolvedClusterCirclePaint: Record<string, any> = {};
|
||||
let resolvedClusterSymbolLayout: Record<string, any> = {};
|
||||
let resolvedClusterSymbolPaint: Record<string, any> = {};
|
||||
|
||||
$: resolvedClusterCirclePaint = clusterCirclePaint ?? {
|
||||
'circle-color': [
|
||||
'step',
|
||||
['get', 'point_count'],
|
||||
withAlpha(clusterInfo, 0.7),
|
||||
25,
|
||||
withAlpha(clusterWarning, 0.7),
|
||||
80,
|
||||
withAlpha(clusterError, 0.65)
|
||||
],
|
||||
'circle-radius': ['step', ['get', 'point_count'], 22, 20, 32, 60, 44],
|
||||
'circle-opacity': 1,
|
||||
'circle-stroke-color': withAlpha(clusterBaseContent, 0.25),
|
||||
'circle-stroke-width': 2,
|
||||
'circle-blur': 0
|
||||
};
|
||||
|
||||
$: resolvedClusterSymbolLayout = clusterSymbolLayout ?? {
|
||||
'text-field': '{point_count_abbreviated}',
|
||||
'text-font': ['Open Sans Semibold', 'Open Sans Regular', 'Arial Unicode MS Regular'],
|
||||
'text-size': 13
|
||||
};
|
||||
|
||||
$: resolvedClusterSymbolPaint = clusterSymbolPaint ?? {
|
||||
'text-color': [
|
||||
'step',
|
||||
['get', 'point_count'],
|
||||
clusterInfoContent,
|
||||
25,
|
||||
clusterWarningContent,
|
||||
80,
|
||||
clusterErrorContent
|
||||
],
|
||||
'text-halo-color': withAlpha(clusterBaseContent, 0.12),
|
||||
'text-halo-width': 0.75,
|
||||
'text-halo-blur': 0
|
||||
};
|
||||
|
||||
type ClusterSource = {
|
||||
getClusterExpansionZoom: (
|
||||
clusterId: number,
|
||||
callback: (error: unknown, zoom: number) => void
|
||||
) => void;
|
||||
};
|
||||
|
||||
function handleClusterClick(e: CustomEvent<LayerClickInfo>) {
|
||||
dispatch('clusterClick', e.detail);
|
||||
|
||||
if (!expandClusterOnClick) return;
|
||||
const { clusterId, features, map: eventMap, source } = e.detail ?? ({} as any);
|
||||
if (!clusterId || !features?.length || !eventMap || !source) return;
|
||||
|
||||
const center = getPointCoordinates(features[0]);
|
||||
if (!center) return;
|
||||
|
||||
const geoJsonSource = eventMap.getSource(source) as ClusterSource | undefined;
|
||||
if (!geoJsonSource || typeof geoJsonSource.getClusterExpansionZoom !== 'function') return;
|
||||
|
||||
geoJsonSource.getClusterExpansionZoom(
|
||||
Number(clusterId),
|
||||
(error: unknown, zoomLevel: number) => {
|
||||
if (error) {
|
||||
console.error('Failed to expand cluster', error);
|
||||
return;
|
||||
}
|
||||
eventMap.easeTo({ center, zoom: zoomLevel });
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function handleMarkerLayerClick(event: CustomEvent<any>) {
|
||||
const feature = event.detail?.feature;
|
||||
const markerProps = getMarkerProps(feature);
|
||||
dispatch('markerClick', { feature, markerProps });
|
||||
}
|
||||
|
||||
function setMarkerActiveByProps(markerProps: Record<string, unknown> | null, active: boolean) {
|
||||
const markerId = getMarkerId(markerProps);
|
||||
if (!markerId) return;
|
||||
activeMarkerId = active ? markerId : activeMarkerId === markerId ? null : activeMarkerId;
|
||||
}
|
||||
|
||||
function makeSetActive(markerProps: Record<string, unknown> | null) {
|
||||
return (active: boolean) => setMarkerActiveByProps(markerProps, active);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="relative">
|
||||
{#if showBasemapSelector}
|
||||
{#if $$slots.overlayControls}
|
||||
<slot name="overlayControls" {basemapType} {setBasemapType} />
|
||||
{:else}
|
||||
<div class="absolute top-4 right-4 z-10 bg-base-200 backdrop-blur-sm rounded-lg shadow-lg">
|
||||
<div class="p-2">
|
||||
<MapStyleSelector bind:basemapType />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<MapLibre
|
||||
bind:map
|
||||
style={getBasemapUrl(basemapType)}
|
||||
class={mapClass}
|
||||
{standardControls}
|
||||
{zoom}
|
||||
{center}
|
||||
>
|
||||
{#key styleNonce}
|
||||
{#if effectiveGeoJson && Array.isArray(effectiveGeoJson.features) && effectiveGeoJson.features.length > 0}
|
||||
{#if clusterEnabled}
|
||||
<GeoJSON id={sourceId} data={effectiveGeoJson} cluster={clusterOptions} generateId>
|
||||
<CircleLayer
|
||||
id={`${sourceId}-clusters`}
|
||||
applyToClusters
|
||||
hoverCursor="pointer"
|
||||
paint={resolvedClusterCirclePaint}
|
||||
on:click={handleClusterClick}
|
||||
/>
|
||||
<!-- Render cluster counts as HTML so they don't depend on map glyph/font availability -->
|
||||
<MarkerLayer applyToClusters let:feature={clusterFeature}>
|
||||
{@const clusterProps = getMarkerProps(clusterFeature)}
|
||||
{@const abbreviated = clusterProps && clusterProps['point_count_abbreviated']}
|
||||
{@const count = abbreviated ?? (clusterProps && clusterProps['point_count'])}
|
||||
{#if typeof count !== 'undefined' && count !== null}
|
||||
<div
|
||||
class="pointer-events-none select-none font-sans text-xs font-bold text-base-content drop-shadow-sm"
|
||||
>
|
||||
{count}
|
||||
</div>
|
||||
{/if}
|
||||
</MarkerLayer>
|
||||
<MarkerLayer
|
||||
applyToClusters={false}
|
||||
on:click={handleMarkerLayerClick}
|
||||
let:feature={featureData}
|
||||
>
|
||||
{@const markerProps = getMarkerProps(featureData)}
|
||||
{@const markerLngLat = getPointCoordinates(featureData)}
|
||||
{@const markerId = getMarkerId(markerProps)}
|
||||
{@const isActive = markerId !== null && activeMarkerId === markerId}
|
||||
<slot
|
||||
name="marker"
|
||||
{featureData}
|
||||
{markerProps}
|
||||
{markerLngLat}
|
||||
{isActive}
|
||||
setActive={makeSetActive(markerProps)}
|
||||
/>
|
||||
</MarkerLayer>
|
||||
</GeoJSON>
|
||||
{:else}
|
||||
<GeoJSON id={sourceId} data={effectiveGeoJson} generateId>
|
||||
<MarkerLayer
|
||||
applyToClusters={false}
|
||||
on:click={handleMarkerLayerClick}
|
||||
let:feature={featureData}
|
||||
>
|
||||
{@const markerProps = getMarkerProps(featureData)}
|
||||
{@const markerLngLat = getPointCoordinates(featureData)}
|
||||
{@const markerId = getMarkerId(markerProps)}
|
||||
{@const isActive = markerId !== null && activeMarkerId === markerId}
|
||||
<slot
|
||||
name="marker"
|
||||
{featureData}
|
||||
{markerProps}
|
||||
{markerLngLat}
|
||||
{isActive}
|
||||
setActive={makeSetActive(markerProps)}
|
||||
/>
|
||||
</MarkerLayer>
|
||||
</GeoJSON>
|
||||
{/if}
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
{#if mapClickEnabled}
|
||||
<MapEvents on:click={handleMapClick} on:moveend={handleMapMove} />
|
||||
{:else}
|
||||
<MapEvents on:moveend={handleMapMove} />
|
||||
{/if}
|
||||
<slot name="overlays" {map} />
|
||||
</MapLibre>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Ensure map popups render above HTML markers/pins */
|
||||
:global(.maplibregl-popup),
|
||||
:global(.mapboxgl-popup) {
|
||||
z-index: 2147483647 !important;
|
||||
}
|
||||
|
||||
/* Markers can be assigned z-index by the map library; keep them below popups by default */
|
||||
:global(.maplibregl-marker),
|
||||
:global(.mapboxgl-marker) {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
/* But raise the actively hovered/focused marker above other markers */
|
||||
:global(.maplibregl-marker.map-pin-active),
|
||||
:global(.mapboxgl-marker.map-pin-active) {
|
||||
z-index: 2147483000 !important;
|
||||
}
|
||||
</style>
|
||||
92
frontend/src/lib/components/map/MapStyleSelector.svelte
Normal file
92
frontend/src/lib/components/map/MapStyleSelector.svelte
Normal file
@@ -0,0 +1,92 @@
|
||||
<script lang="ts">
|
||||
import { basemapOptions, getBasemapLabel } from '$lib';
|
||||
|
||||
import MapIcon from '~icons/mdi/map';
|
||||
|
||||
export let basemapType: string = 'default';
|
||||
|
||||
const categoryOrder = [
|
||||
'Standard',
|
||||
'3D Terrain',
|
||||
'Satellite',
|
||||
'Topographic',
|
||||
'Clean',
|
||||
'Specialized'
|
||||
];
|
||||
|
||||
const groupedOptions = basemapOptions.reduce<Record<string, typeof basemapOptions>>(
|
||||
(acc, option) => {
|
||||
if (!acc[option.category]) {
|
||||
acc[option.category] = [];
|
||||
}
|
||||
acc[option.category].push(option);
|
||||
return acc;
|
||||
},
|
||||
{}
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="dropdown dropdown-left">
|
||||
<div
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded="false"
|
||||
class="btn btn-sm btn-ghost gap-2 min-h-0 h-8 px-3"
|
||||
>
|
||||
<MapIcon class="w-4 h-4" />
|
||||
<span class="text-xs font-medium">{getBasemapLabel(basemapType)}</span>
|
||||
<svg class="w-3 h-3 fill-none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
{#if basemapOptions?.length}
|
||||
<div
|
||||
class="dropdown-content z-20 shadow-lg bg-base-200 rounded-box w-54 max-h-80 overflow-y-auto overflow-x-hidden p-3"
|
||||
role="menu"
|
||||
>
|
||||
{#each categoryOrder as category}
|
||||
{#if groupedOptions[category]?.length}
|
||||
<div class="mb-2 last:mb-0">
|
||||
<p class="px-2 pb-1 text-xs uppercase tracking-wide text-base-content/60">{category}</p>
|
||||
<ul class="space-y-1">
|
||||
{#each groupedOptions[category] as option}
|
||||
<li>
|
||||
<button
|
||||
class="flex items-center gap-3 px-3 py-2 text-sm rounded-md transition-colors {basemapType ===
|
||||
option.value
|
||||
? 'bg-primary/10 font-medium'
|
||||
: 'hover:bg-base-300/60'}"
|
||||
on:pointerdown={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
basemapType = option.value;
|
||||
}}
|
||||
on:click={() => (basemapType = option.value)}
|
||||
role="menuitem"
|
||||
>
|
||||
<span class="text-lg">{option.icon}</span>
|
||||
<span class="truncate">{option.label}</span>
|
||||
{#if basemapType === option.value}
|
||||
<svg
|
||||
class="w-4 h-4 ml-auto text-primary"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user