diff --git a/website/src/lib/assets/layers.ts b/website/src/lib/assets/layers.ts index b35a2734..9a3307ae 100644 --- a/website/src/lib/assets/layers.ts +++ b/website/src/lib/assets/layers.ts @@ -872,10 +872,11 @@ type OverpassQueryData = { color: string, }, tags: Record | Record[], + symbol?: string, }; export const overpassQueryData: Record = { - "bakery": { + bakery: { icon: { svg: Croissant, color: "Coral", @@ -891,7 +892,8 @@ export const overpassQueryData: Record = { }, tags: { shop: ["supermarket", "convenience"], - } + }, + symbol: "Convenience Store" }, "eat-and-drink": { icon: { @@ -900,16 +902,18 @@ export const overpassQueryData: Record = { }, tags: { amenity: ["restaurant", "fast_food", "cafe", "pub", "bar"] - } + }, + symbol: "Restaurant" }, - "toilets": { + toilets: { icon: { svg: Droplet, color: "DeepSkyBlue", }, tags: { amenity: "toilets" - } + }, + symbol: "Restroom" }, water: { icon: { @@ -921,7 +925,8 @@ export const overpassQueryData: Record = { }, { natural: "spring", drinking_water: "yes" - }] + }], + symbol: "Drinking Water" }, shower: { icon: { @@ -930,7 +935,8 @@ export const overpassQueryData: Record = { }, tags: { amenity: "shower" - } + }, + symbol: "Shower" }, "fuel-station": { icon: { @@ -939,7 +945,8 @@ export const overpassQueryData: Record = { }, tags: { amenity: "fuel" - } + }, + symbol: "Gas Station" }, parking: { icon: { @@ -948,7 +955,8 @@ export const overpassQueryData: Record = { }, tags: { amenity: "parking" - } + }, + symbol: "Parking Area" }, garage: { icon: { @@ -957,7 +965,8 @@ export const overpassQueryData: Record = { }, tags: { shop: ["car_repair", "motorcycle_repair"] - } + }, + symbol: "Car Repair" }, barrier: { icon: { @@ -984,7 +993,8 @@ export const overpassQueryData: Record = { }, tags: { tourism: "viewpoint" - } + }, + symbol: "Scenic Area" }, hotel: { icon: { @@ -993,7 +1003,8 @@ export const overpassQueryData: Record = { }, tags: { tourism: ["hotel", "hostel", "guest_house", "motel"] - } + }, + symbol: "Hotel" }, campsite: { icon: { @@ -1002,7 +1013,8 @@ export const overpassQueryData: Record = { }, tags: { tourism: "camp_site" - } + }, + symbol: "Campground" }, hut: { icon: { @@ -1011,7 +1023,8 @@ export const overpassQueryData: Record = { }, tags: { tourism: ["alpine_hut", "wilderness_hut"] - } + }, + symbol: "Lodge" }, summit: { icon: { @@ -1020,7 +1033,8 @@ export const overpassQueryData: Record = { }, tags: { natural: "peak" - } + }, + symbol: "Summit" }, pass: { icon: { @@ -1047,7 +1061,8 @@ export const overpassQueryData: Record = { }, tags: { amenity: "bicycle_parking" - } + }, + symbol: "Parking Area" }, "bicycle-rental": { icon: { @@ -1074,7 +1089,8 @@ export const overpassQueryData: Record = { }, tags: { railway: "station" - } + }, + symbol: "Ground Transportation" }, "tram-stop": { icon: { @@ -1084,6 +1100,7 @@ export const overpassQueryData: Record = { tags: { railway: "tram_stop" }, + symbol: "Ground Transportation" }, "bus-stop": { icon: { @@ -1093,7 +1110,8 @@ export const overpassQueryData: Record = { tags: { "public_transport": ["stop_position", "platform"], bus: "yes" - } + }, + symbol: "Ground Transportation" }, ferry: { icon: { diff --git a/website/src/lib/assets/symbols.ts b/website/src/lib/assets/symbols.ts new file mode 100644 index 00000000..8a96e367 --- /dev/null +++ b/website/src/lib/assets/symbols.ts @@ -0,0 +1,45 @@ +import { Landmark, type Icon, Shell, Bike, Building, Tent, Car, Wrench, ShoppingBasket, Droplet, DoorOpen, Trees, Fuel, Home, Info, TreeDeciduous, CircleParking, Cross, Utensils, Construction, BrickWall, ShowerHead, Mountain, Phone, Eye, TrainFront, Bed } from "lucide-svelte"; +import type { ComponentType } from "svelte"; + +export type Symbol = { + value: string; + icon?: ComponentType; +}; + +export const symbols: { [key: string]: Symbol } = { + bank: { value: 'Bank', icon: Landmark }, + beach: { value: 'Beach', icon: Shell }, + bike_trail: { value: 'Bike Trail', icon: Bike }, + bridge: { value: 'Bridge' }, + building: { value: 'Building', icon: Building }, + campground: { value: 'Campground', icon: Tent }, + car: { value: 'Car', icon: Car }, + car_repair: { value: 'Car Repair', icon: Wrench }, + convenience_store: { value: 'Convenience Store', icon: ShoppingBasket }, + crossing: { value: 'Crossing' }, + department_store: { value: 'Department Store', icon: ShoppingBasket }, + drinking_water: { value: 'Drinking Water', icon: Droplet }, + exit: { value: 'Exit', icon: DoorOpen }, + lodge: { value: 'Lodge', icon: Home }, + forest: { value: 'Forest', icon: Trees }, + gas_station: { value: 'Gas Station', icon: Fuel }, + ground_transportation: { value: 'Ground Transportation', icon: TrainFront }, + hotel: { value: 'Hotel', icon: Bed }, + house: { value: 'House', icon: Home }, + information: { value: 'Information', icon: Info }, + park: { value: 'Park', icon: TreeDeciduous }, + parking_area: { value: 'Parking Area', icon: CircleParking }, + pharmacy: { value: 'Pharmacy', icon: Cross }, + picnic_area: { value: 'Picnic Area', icon: Utensils }, + restaurant: { value: 'Restaurant', icon: Utensils }, + restricted_area: { value: 'Restricted Area', icon: Construction }, + restroom: { value: 'Restroom' }, + road: { value: 'Road', icon: BrickWall }, + scenic_area: { value: 'Scenic Area', icon: Eye }, + shopping_center: { value: 'Shopping Center', icon: ShoppingBasket }, + shower: { value: 'Shower', icon: ShowerHead }, + summit: { value: 'Summit', icon: Mountain }, + telephone: { value: 'Telephone', icon: Phone }, + tunnel: { value: 'Tunnel' }, + water_source: { value: 'Water Source', icon: Droplet }, +}; \ No newline at end of file diff --git a/website/src/lib/components/gpx-layer/WaypointPopup.svelte b/website/src/lib/components/gpx-layer/WaypointPopup.svelte index 42bc1ad7..7f472979 100644 --- a/website/src/lib/components/gpx-layer/WaypointPopup.svelte +++ b/website/src/lib/components/gpx-layer/WaypointPopup.svelte @@ -7,6 +7,7 @@ import { Dot, Trash2 } from 'lucide-svelte'; import { onMount } from 'svelte'; import { Tool, currentTool } from '$lib/stores'; + import { symbols } from '$lib/assets/symbols'; import { _ } from 'svelte-i18n'; let popupElement: HTMLDivElement; @@ -15,6 +16,11 @@ waypointPopup.setDOMContent(popupElement); popupElement.classList.remove('hidden'); }); + + $: symbolKey = + $currentPopupWaypoint && $currentPopupWaypoint[0].sym + ? Object.keys(symbols).find((key) => symbols[key].value === $currentPopupWaypoint[0].sym) + : undefined;