Fix/disable-markers-appear-inShowRouteMode

src/components/map/MapView.svelte

@@ -137,10 +137,7 @@
 	}
 
 	function updateMarkers() {
-		if (showRoute) {
-			const stopsToShow = allStops.filter((s) => s.routeIds.includes(selectedRoute.id));
-			stopsToShow.forEach((s) => addMarker(s));
-		} else if (!selectedRoute && !isTripPlanModeActive) {
+		if (!selectedRoute && !isTripPlanModeActive) {
 			allStops.forEach((s) => addMarker(s));
 		}
 	}

src/components/map/RouteMap.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { calculateMidpoint } from '$lib/mathUtils';
 	import { clearVehicleMarkersMap, fetchAndUpdateVehicles } from '$lib/vehicleUtils';
 	import { onMount, onDestroy } from 'svelte';
 	export let mapProvider;
@@ -11,19 +12,26 @@
 
 	// used to clear interval api calls
 	let currentIntervalId = null;
+	let loadRouteDataPromise = null;
 
 	onMount(async () => {
-		await loadRouteData();
+		loadRouteDataPromise = loadRouteData();
+		await loadRouteDataPromise;
 	});
 
 	onDestroy(async () => {
 		isMounted = false;
-		mapProvider.removePolyline(await polyline);
-		mapProvider.removeStopMarkers();
-		mapProvider.cleanupInfoWindow();
-		clearInterval(currentIntervalId);
-		clearVehicleMarkersMap(mapProvider);
-		mapProvider.clearVehicleMarkers();
+		if (loadRouteDataPromise) {
+			await loadRouteDataPromise;
+		}
+		await Promise.all([
+			mapProvider.removePolyline(await polyline),
+			mapProvider.removeStopMarkers(),
+			mapProvider.cleanupInfoWindow(),
+			clearInterval(currentIntervalId),
+			clearVehicleMarkersMap(mapProvider),
+			mapProvider.clearVehicleMarkers()
+		]);
 	});
 
 	async function loadRouteData() {
@@ -40,14 +48,17 @@
 			const shapeResponse = await fetch(`/api/oba/shape/${shapeId}`);
 			shapeData = await shapeResponse.json();
 			const shapePoints = shapeData?.data?.entry?.points;
-
 			if (shapePoints && isMounted) {
 				polyline = await mapProvider.createPolyline(shapePoints);
 			}
 		}
 
 		const stopTimes = tripData?.data?.entry?.schedule?.stopTimes ?? [];
 		const stops = tripData?.data?.references?.stops ?? [];
+		// TODO: implement better way to transition to route shape
+		const location = calculateMidpoint(stops);
+
+		mapProvider.flyTo(location.lat, location.lng, 13);
 
 		for (const stopTime of stopTimes) {
 			const stop = stops.find((s) => s.id === stopTime.stopId);
@@ -56,6 +67,8 @@
 			}
 		}
 
-		currentIntervalId = await fetchAndUpdateVehicles(routeId, mapProvider);
+		if (routeId && isMounted) {
+			currentIntervalId = await fetchAndUpdateVehicles(routeId, mapProvider);
+		}
 	}
 </script>

src/lib/Provider/GoogleMapProvider.js

@@ -402,6 +402,10 @@ export default class GoogleMapProvider {
 		this.map.panTo({ lat, lng });
 	}
 
+	flyTo(lat, lng, zoom = 15) {
+		this.map.setZoom(zoom);
+		this.map.setCenter({ lat, lng });
+	}
 	setZoom(zoom) {
 		this.map.setZoom(zoom);
 	}

src/lib/Provider/OpenStreetMapProvider.js

@@ -401,6 +401,11 @@ export default class OpenStreetMapProvider {
 		this.map.panTo([lat, lng]);
 	}
 
+	flyTo(lat, lng, zoom = 15) {
+		if (!browser || !this.map) return;
+		this.map.flyTo([lat, lng], zoom);
+	}
+
 	setZoom(zoom) {
 		if (!browser || !this.map) return;
 		this.map.setZoom(zoom);