Add support for OpenStreetMap

eslint.config.js

@@ -13,7 +13,8 @@ export default [
 		languageOptions: {
 			globals: {
 				...globals.browser,
-				...globals.node
+				...globals.node,
+				L: 'readonly'
 			}
 		}
 	},

package.json

@@ -37,6 +37,10 @@
 	"type": "module",
 	"dependencies": {
 		"@fortawesome/free-regular-svg-icons": "^6.6.0",
-		"onebusaway-sdk": "^1.0.1"
+		"@googlemaps/js-api-loader": "^1.16.8",
+		"leaflet": "^1.9.4",
+		"leaflet-polylinedecorator": "^1.6.0",
+		"onebusaway-sdk": "^1.0.1",
+		"polyline-encoded": "^0.0.9"
 	}
 }

src/assets/styles/leaflet-map.css

@@ -0,0 +1,31 @@
+.leaflet-touch {
+	.leaflet-bar {
+		position: absolute;
+		bottom: 6px;
+		padding: 0px;
+		right: 0px;
+
+		.leaflet-control-zoom-in,
+		.leaflet-control-zoom-out {
+			width: 2.2rem;
+			height: 40px;
+			margin: 1.6px;
+			padding: 0px;
+			z-index: 5;
+		}
+
+		.leaflet-control-zoom-out span .leaflet-control-zoom-in span {
+			width: 2.2rem;
+			height: 2.2rem;
+			background-repeat: no-repeat;
+			align-items: center;
+		}
+	}
+
+	.leaflet-control-attribution {
+		display: none;
+	}
+}
+.leaflet-control {
+	background-color: #fff;
+}

src/components/MapContainer.svelte

@@ -0,0 +1,48 @@
+<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 as apiKey
+	} from '$env/static/public';
+	import { createEventDispatcher, onMount } from 'svelte';
+	import { MapSource } from './../config/mapSource.js';
+
+	let mapProvider = null;
+	let mapSource = null;
+	const dispatch = createEventDispatcher();
+
+	onMount(() => {
+		if (PUBLIC_OBA_MAP_PROVIDER === MapSource.Google) {
+			mapProvider = new GoogleMapProvider(apiKey);
+			mapSource = MapSource.Google;
+		} else if (PUBLIC_OBA_MAP_PROVIDER === MapSource.OpenStreetMap) {
+			mapProvider = new OpenStreetMapProvider(apiKey);
+			mapSource = MapSource.OpenStreetMap;
+		} else {
+			console.error('Unknown map provider:');
+		}
+	});
+
+	function forward(event) {
+		dispatch(event.type, event.detail);
+	}
+</script>
+
+{#if mapProvider}
+	<MapView
+		{mapProvider}
+		{mapSource}
+		{...$$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}