feat: added the dependency injection approach for map provider

src/components/MapContainer.svelte

@@ -0,0 +1,40 @@
+<script>
+	import MapView from './map/MapView.svelte';
+	import GoogleMapProvider from '$lib/Provider/GoogleMapProvider';
+	import OpenStreetMapProvider from '$lib/Provider/OpenStreetMapProvider';
+	import { PUBLIC_OBA_MAP_PROVIDER, PUBLIC_OBA_GOOGLE_MAPS_API_KEY } from '$env/static/public';
+	import { createEventDispatcher, onMount } from 'svelte';
+
+	let mapProvider = null;
+	const dispatch = createEventDispatcher();
+
+	onMount(() => {
+		if (PUBLIC_OBA_MAP_PROVIDER === 'google') {
+			mapProvider = new GoogleMapProvider(PUBLIC_OBA_GOOGLE_MAPS_API_KEY);
+		} else if (PUBLIC_OBA_MAP_PROVIDER === 'osm') {
+			mapProvider = new OpenStreetMapProvider();
+		} else {
+			console.error('Unknown map provider:');
+		}
+	});
+
+	function forward(event) {
+		dispatch(event.type, event.detail);
+	}
+</script>
+
+{#if mapProvider}
+	<MapView
+		{mapProvider}
+		{...$$props}
+		on:stopSelected={forward}
+		on:selectedTrip={forward}
+		on:selectedRoute={forward}
+		on:showRoute={forward}
+		on:showRouteMap={forward}
+		on:stop={forward}
+		on:mapProvider={forward}
+	/>
+{:else}
+	<p>Loading map...</p>
+{/if}

src/routes/+page.svelte

@@ -1,13 +1,12 @@
 <script>
 	import { pushState } from '$app/navigation';
-	import MapView from '../components/map/MapView.svelte';
 	import Header from '../components/navigation/Header.svelte';
 	import ModalPane from '../components/navigation/ModalPane.svelte';
 	import StopPane from '../components/oba/StopPane.svelte';
 	import SearchResults from '../components/search/SearchResults.svelte';
-	import {
-		PUBLIC_OBA_GOOGLE_MAPS_API_KEY as apiKey,
-	} from '$env/static/public';
+	import MapView from '../components/map/MapView.svelte';
+	import MapContainer from '$components/MapContainer.svelte';
+	import { PUBLIC_OBA_GOOGLE_MAPS_API_KEY as apiKey } from '$env/static/public';
 	import GoogleMapProvider from '$lib/Provider/GoogleMapProvider';
 
 	const mapProvider = new GoogleMapProvider(apiKey);
@@ -19,7 +18,6 @@
 	let showRouteMap = false;
 	let showAllStops = false;
 	let searchResults = null;
-	
 
 	function stopSelected(event) {
 		stop = event.detail.stop;
@@ -73,7 +71,7 @@
 	}
 </script>
 
-<div class="absolute top-0 left-0 right-0 z-40">
+<div class="absolute left-0 right-0 top-0 z-40">
 	<Header on:searchResults={handleSearch} />
 </div>
 
@@ -98,17 +96,17 @@
 				on:stopSelected={stopSelected}
 			/>
 		{:else}
-			<p class="dark:text-gray-200 p-4 text-center">No results found.</p>
+			<p class="p-4 text-center dark:text-gray-200">No results found.</p>
 		{/if}
 	</ModalPane>
 {/if}
 
-<MapView
+<MapContainer
 	{selectedTrip}
 	{selectedRoute}
 	on:stopSelected={stopSelected}
 	{showRoute}
 	{showRouteMap}
 	{stop}
-	mapProvider={mapProvider}
+	{mapProvider}
 />