added the feature to change the url onclick, onclose is implemented

src/components/map/GoogleMap.svelte

@@ -7,6 +7,7 @@
 		PUBLIC_OBA_REGION_CENTER_LAT as initialLat,
 		PUBLIC_OBA_REGION_CENTER_LNG as initialLng
 	} from '$env/static/public';
+	import { pushState } from '$app/navigation';
 
 	import { createMap, loadGoogleMapsLibrary, nightModeStyles } from '$lib/googleMaps';
 	import LocationButton from '$lib/LocationButton/LocationButton.svelte';
@@ -68,6 +69,7 @@
 		const container = document.createElement('div');
 		document.body.appendChild(container);
 		function handleClick() {
+			pushState(`/stops/${s.id}`);
 			dispatch('stopSelected', { stop: s });
 		}
 
@@ -156,6 +158,10 @@
 			}
 		});
 	});
+
+	function handleStopSelected(stop) {
+		dispatch('stopSelected', { stop });
+	}
 </script>
 
 <div id="map"></div>

src/components/navigation/ModalPane.svelte

@@ -4,10 +4,12 @@
 	import { faX } from '@fortawesome/free-solid-svg-icons';
 	import { keybinding } from '$lib/keybinding';
 	import { createEventDispatcher } from 'svelte';
+	import { pushState } from '$app/navigation';
 
 	const dispatch = createEventDispatcher();
 
 	function closePane() {
+		pushState('/');
 		dispatch('close');
 	}
 </script>

src/routes/api/oba/stop/[stopID]/+server.js

@@ -0,0 +1,18 @@
+import { error, json } from '@sveltejs/kit';
+
+import { PUBLIC_OBA_SERVER_URL as baseURL } from '$env/static/public';
+import { PRIVATE_OBA_API_KEY as apiKey } from '$env/static/private';
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET({ params }) {
+	const stopID = params.stopID;
+	const apiURL = `${baseURL}/api/where/stop/${stopID}.json?key=${apiKey}`;
+	const response = await fetch(apiURL);
+
+	if (!response.ok) {
+		return error(500, 'Unable to fetch arrivals-and-departures-for-stop.');
+	}
+
+	const data = await response.json();
+	return json(data);
+}

src/routes/stops/[stopID]/+page.svelte

@@ -0,0 +1,28 @@
+<script context="module">
+	import StopPane from '../../../components/oba/StopPane.svelte';
+
+	export async function load({ params }) {
+		const stopID = params.stopID;
+		const response = await fetch(`/api/oba/stops/${stopID}`);
+
+		if (!response.ok) {
+			return {
+				status: response.status,
+				error: new Error('Failed to fetch stop data')
+			};
+		}
+
+		const stopData = await response.json();
+		return {
+			props: {
+				stopData
+			}
+		};
+	}
+</script>
+
+<script>
+	export let stopData;
+</script>
+
+<StopPane {stopData} />