diff --git a/src/components/map/GoogleMap.svelte b/src/components/map/GoogleMap.svelte index c76eb94..82318df 100644 --- a/src/components/map/GoogleMap.svelte +++ b/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,6 +68,7 @@ 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()]; @@ -68,9 +76,9 @@ 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)); } } @@ -112,14 +120,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}`); diff --git a/src/components/map/StopMarker.svelte b/src/components/map/StopMarker.svelte index c9deb77..933b0a6 100644 --- a/src/components/map/StopMarker.svelte +++ b/src/components/map/StopMarker.svelte @@ -1,13 +1,14 @@