updated for hiding unrelated stops

Author: tarunsinghofficial

src/components/map/GoogleMap.svelte

@@ -16,12 +16,15 @@
 	import RouteMap from './RouteMap.svelte';
 
 	export let selectedTrip;
+	export let selectedRoute = null;
+	export let showRoute = false;
 
 	const dispatch = createEventDispatcher();
 
 	let map = null;
 
 	let markers = [];
+	let allStops = [];
 
 	async function loadStopsForLocation(lat, lng) {
 		const response = await fetch(`/api/oba/stops-for-location?lat=${lat}&lng=${lng}`);
@@ -53,20 +56,54 @@
 	async function loadStopsAndAddMarkers(lat, lng) {
 		const json = await loadStopsForLocation(lat, lng);
 		const stops = json.data.list;
+		allStops = [...allStops, ...stops];
 
-		for (const s of stops) {
-			if (markerExists(s)) {
-				continue;
-			}
+		clearAllMarkers();
 
-			addMarker(s);
+		if (showRoute && selectedRoute) {
+			const stopsToShow = allStops.filter((s) => s.routeIds.includes(selectedRoute.id));
+			stopsToShow.forEach((s) => addMarker(s));
+		} else {
+			stops.forEach((s) => addMarker(s));
 		}
 	}
 
-	function markerExists(s) {
-		return markers.some((marker) => marker.s.id === s.id);
+	function clearAllMarkers() {
+		markers.forEach(({ marker, overlay, element }) => {
+			if (marker) {
+				marker.setMap(null);
+			}
+			if (overlay) {
+				if (overlay.map) {
+					overlay.map = null;
+				}
+				if (overlay.draw) {
+					overlay.draw = () => {};
+				}
+				if (overlay.onRemove) {
+					overlay.onRemove();
+				}
+			}
+			if (element && element.parentNode) {
+				element.parentNode.removeChild(element);
+			}
+		});
+		markers = [];
+	}
+
+	$: if (selectedRoute && showRoute) {
+		clearAllMarkers();
+		const stopsToShow = allStops.filter((s) => s.routeIds.includes(selectedRoute.id));
+		stopsToShow.forEach((s) => addMarker(s));
+	} else if (!showRoute || !selectedRoute) {
+		clearAllMarkers();
+		allStops.forEach((s) => addMarker(s));
 	}
 
+	/* function markerExists(s) {
+		return markers.some((marker) => marker.s.id === s.id);
+	} */
+
 	function addMarker(s) {
 		const container = document.createElement('div');
 		document.body.appendChild(container);
@@ -109,6 +146,11 @@
 			container.style.position = 'absolute';
 			this.getPanes().overlayMouseTarget.appendChild(container);
 		};
+		overlay.onRemove = function () {
+			if (container.parentNode) {
+				container.parentNode.removeChild(container);
+			}
+		};
 		markers.push({ s, marker, overlay, element: container });
 	}
 
@@ -165,7 +207,7 @@
 <div id="map"></div>
 
 {#if selectedTrip}
-    <RouteMap map={map} tripId={selectedTrip.tripId} />
+	<RouteMap {map} tripId={selectedTrip.tripId} />
 {/if}
 
 <LocationButton on:locationObtained={handleLocationObtained} />

src/routes/+page.svelte

@@ -5,6 +5,8 @@
 
 	let stop;
 	let selectedTrip = null;
+	let showRoute = false;
+	let selectedRoute = null;
 
 	function stopSelected(event) {
 		stop = event.detail.stop;
@@ -13,18 +15,38 @@
 	function closePane() {
 		stop = null;
 		selectedTrip = null;
+		selectedRoute = null;
+		showRoute = false;
+		clearAllMarkers();
 	}
 
 	function tripSelected(event) {
-        selectedTrip = event.detail;
-    }
+		selectedTrip = event.detail;
+		showRoute = true;
+		selectedRoute = {
+			id: event.detail.routeId,
+			shortName: event.detail.routeShortName
+		};
+	}
 
+	function toggleRoute() {
+		showRoute = !showRoute;
+		if (!showRoute) {
+			selectedRoute = null;
+		}
+	}
 </script>
 
 {#if stop}
 	<ModalPane on:close={closePane}>
-		<StopPane {stop} on:tripSelected={tripSelected} />
+		<StopPane
+			{stop}
+			on:tripSelected={tripSelected}
+			{showRoute}
+			{toggleRoute}
+			selectedRouteId={selectedRoute?.id}
+		/>
 	</ModalPane>
 {/if}
 
-<GoogleMap {selectedTrip} on:stopSelected={stopSelected} />
+<GoogleMap {selectedTrip} {selectedRoute} on:stopSelected={stopSelected} {showRoute} />