Feat: show the correct icon type according to priority

src/components/map/GoogleMap.svelte

@@ -14,6 +14,12 @@
 	import LocationButton from '$lib/LocationButton/LocationButton.svelte';
 	import StopMarker from './StopMarker.svelte';
 	import RouteMap from './RouteMap.svelte';
+	import { faBus } from '@fortawesome/free-solid-svg-icons';
+	import {
+		RouteType,
+		routePriorities,
+		prioritizedRouteTypeForDisplay
+	} from '../../config/routeConfig';
 
 	export let selectedTrip = null;
 	export let selectedRoute = null;
@@ -30,6 +36,7 @@
 
 	let markers = [];
 	let allStops = [];
+	let routeReference = [];
 
 	async function loadStopsForLocation(lat, lng) {
 		const response = await fetch(`/api/oba/stops-for-location?lat=${lat}&lng=${lng}`);
@@ -61,16 +68,17 @@
 	async function loadStopsAndAddMarkers(lat, lng) {
 		const json = await loadStopsForLocation(lat, lng);
 		const newStops = json.data.list;
+		routeReference = json.data.references?.routes || [];
 
 		allStops = [...new Map([...allStops, ...newStops].map((stop) => [stop.id, stop])).values()];
 
 		clearAllMarkers();
 
 		if (showRoute && selectedRoute) {
 			const stopsToShow = allStops.filter((s) => s.routeIds.includes(selectedRoute.id));
-			stopsToShow.forEach((s) => addMarker(s));
+			stopsToShow.forEach((s) => addMarker(s, routeReference));
 		} else {
-			newStops.forEach((s) => addMarker(s));
+			newStops.forEach((s) => addMarker(s, routeReference));
 		}
 	}
 
@@ -111,14 +119,27 @@
 		allStops.forEach((s) => addMarker(s));
 	}
 
-	function addMarker(s) {
+	function addMarker(s, routeReference) {
 		const container = document.createElement('div');
 		document.body.appendChild(container);
 
+		let icon = faBus;
+
+		if (routeReference && routeReference.length > 0) {
+			const availableRoutes = s.routeIds
+				.map((id) => routeReference.find((r) => r.id === id))
+				.filter(Boolean);
+			const routeTypes = new Set(availableRoutes.map((r) => r.type));
+			const prioritizedType =
+				routePriorities.find((type) => routeTypes.has(type)) || RouteType.UNKNOWN;
+			icon = prioritizedRouteTypeForDisplay(prioritizedType);
+		}
+
 		new StopMarker({
 			target: container,
 			props: {
 				stop: s,
+				icon,
 				onClick: () => {
 					selectedStopID = s.id;
 					pushState(`/stops/${s.id}`);

src/components/map/StopMarker.svelte

@@ -1,13 +1,14 @@
 <script>
-	import { faBus, faCaretUp } from '@fortawesome/free-solid-svg-icons';
+	import { faCaretUp } from '@fortawesome/free-solid-svg-icons';
 	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
 	export let stop;
 	export let onClick;
+	export let icon;
 </script>
 
 <button class="custom-marker dark:border-[#5a2c2c]" on:click={onClick}>
 	<span class="bus-icon dark:text-white">
-		<FontAwesomeIcon icon={faBus} class="text-black " />
+		<FontAwesomeIcon {icon} class=" text-black" />
 		{#if stop.direction}
 			<span class="direction-arrow {stop.direction.toLowerCase()} dark:text-white">
 				<FontAwesomeIcon icon={faCaretUp} />

src/config/routeConfig.js

@@ -0,0 +1,50 @@
+import {
+	faBus,
+	faFerry,
+	faTrainSubway,
+	faTrain,
+	faCableCar
+} from '@fortawesome/free-solid-svg-icons';
+
+const RouteType = {
+	LIGHT_RAIL: 0,
+	SUBWAY: 1,
+	RAIL: 2,
+	BUS: 3,
+	FERRY: 4,
+	CABLE_CAR: 5,
+	GONDOLA: 6,
+	FUNICULAR: 7,
+	UNKNOWN: 999
+};
+
+const routePriorities = [
+	RouteType.FERRY,
+	RouteType.LIGHT_RAIL,
+	RouteType.SUBWAY,
+	RouteType.RAIL,
+	RouteType.BUS,
+	RouteType.CABLE_CAR,
+	RouteType.GONDOLA,
+	RouteType.FUNICULAR,
+	RouteType.UNKNOWN
+];
+
+const prioritizedRouteTypeForDisplay = (routeType) => {
+	switch (routeType) {
+		case RouteType.FERRY:
+			return faFerry;
+		case RouteType.LIGHT_RAIL:
+		case RouteType.SUBWAY:
+		case RouteType.CABLE_CAR:
+			return faTrainSubway;
+		case RouteType.RAIL:
+			return faTrain;
+		case RouteType.GONDOLA:
+			return faCableCar;
+		default:
+			return faBus;
+	}
+};
+
+export { RouteType, routePriorities, prioritizedRouteTypeForDisplay };