Feat/bounding-box-cache

src/components/map/MapView.svelte

@@ -33,13 +33,54 @@
 	let markers = [];
 	let allStops = [];
 	let routeReference = [];
+	let stopsCache = new Map();
+
+	function cacheKey(zoomLevel, boundingBox) {
+		const roundedBox = {
+			north: boundingBox.north.toFixed(4),
+			south: boundingBox.south.toFixed(4),
+			east: boundingBox.east.toFixed(4),
+			west: boundingBox.west.toFixed(4)
+		};
+
+		return `${roundedBox.north}_${roundedBox.south}_${roundedBox.east}_${roundedBox.west}_${zoomLevel}`;
+	}
+
+	function getBoundingBox() {
+		if (!mapProvider) {
+			throw new Error('Map provider is not initialized');
+		}
+		return mapProvider.getBoundingBox();
+	}
+
+	async function loadStopsForLocation(lat, lng, zoomLevel, firstCall = false) {
+		if (firstCall) {
+			const response = await fetch(`/api/oba/stops-for-location?lat=${lat}&lng=${lng}&radius=2500`);
+			if (!response.ok) {
+				throw new Error('Failed to fetch locations');
+			}
+			return await response.json();
+		}
+
+		const boundingBox = getBoundingBox();
+		const key = cacheKey(zoomLevel, boundingBox);
+
+		if (stopsCache.has(key)) {
+			return stopsCache.get(key);
+		}
+
+		const response = await fetch(
+			`/api/oba/stops-for-location?lat=${lat}&lng=${lng}&latSpan=${boundingBox.north - boundingBox.south}&lngSpan=${boundingBox.east - boundingBox.west}&radius=1000`
+		);
 
-	async function loadStopsForLocation(lat, lng) {
-		const response = await fetch(`/api/oba/stops-for-location?lat=${lat}&lng=${lng}`);
 		if (!response.ok) {
 			throw new Error('Failed to fetch locations');
 		}
-		return await response.json();
+
+		const stopsForLocation = await response.json();
+		stopsCache.set(key, stopsForLocation);
+
+		return stopsForLocation;
 	}
 
 	async function initMap() {
@@ -51,11 +92,13 @@
 
 			mapInstance = mapProvider;
 
-			await loadStopsAndAddMarkers(initialLat, initialLng);
+			await loadStopsAndAddMarkers(initialLat, initialLng, true);
 
 			const debouncedLoadMarkers = debounce(async () => {
 				const center = mapInstance.getCenter();
-				await loadStopsAndAddMarkers(center.lat, center.lng);
+				const zoomLevel = mapInstance.map.getZoom();
+
+				await loadStopsAndAddMarkers(center.lat, center.lng, false, zoomLevel);
 			}, 300);
 
 			mapInstance.addListener('dragend', debouncedLoadMarkers);
@@ -69,15 +112,14 @@
 		}
 	}
 
-	async function loadStopsAndAddMarkers(lat, lng) {
-		const json = await loadStopsForLocation(lat, lng);
-		const newStops = json.data.list;
-		routeReference = json.data.references?.routes || [];
+	async function loadStopsAndAddMarkers(lat, lng, firstCall = false, zoomLevel = 15) {
+		const stopsData = await loadStopsForLocation(lat, lng, zoomLevel, firstCall);
+		const newStops = stopsData.data.list;
+		routeReference = stopsData.data.references.routes || [];
 
 		allStops = [...new Map([...allStops, ...newStops].map((stop) => [stop.id, stop])).values()];
 
 		clearAllMarkers();
-
 		if (showRoute && selectedRoute) {
 			const stopsToShow = allStops.filter((s) => s.routeIds.includes(selectedRoute.id));
 			stopsToShow.forEach((s) => addMarker(s, routeReference));

src/lib/Provider/GoogleMapProvider.js

@@ -41,7 +41,7 @@ export default class GoogleMapProvider {
 				target: container,
 				props: {
 					stop: options.stop,
-					icon: faBus,
+					icon: options.icon || faBus,
 					onClick: () => {
 						options.onClick && options.onClick();
 					}
@@ -123,4 +123,16 @@ export default class GoogleMapProvider {
 			}
 		});
 	}
+
+	getBoundingBox() {
+		const bounds = this.map.getBounds();
+		const ne = bounds.getNorthEast();
+		const sw = bounds.getSouthWest();
+		return {
+			north: ne.lat(),
+			east: ne.lng(),
+			south: sw.lat(),
+			west: sw.lng()
+		};
+	}
 }

src/lib/Provider/OpenStreetMapProvider.js

@@ -150,4 +150,16 @@ export default class OpenStreetMapProvider {
 			this.arrowDecorator = null;
 		}
 	}
+
+	getBoundingBox() {
+		const bounds = this.map.getBounds();
+		const ne = bounds.getNorthEast();
+		const sw = bounds.getSouthWest();
+		return {
+			north: ne.lat,
+			east: ne.lng,
+			south: sw.lat,
+			west: sw.lng
+		};
+	}
 }

src/routes/api/oba/stops-for-location/+server.js

@@ -4,10 +4,16 @@ import oba, { handleOBAResponse } from '$lib/obaSdk';
 export async function GET({ url }) {
 	const lat = +url.searchParams.get('lat');
 	const lng = +url.searchParams.get('lng');
+	const latSpan = +url.searchParams.get('latSpan');
+	const lngSpan = +url.searchParams.get('lngSpan');
+	const radius = +url.searchParams.get('radius');
 
 	const queryParams = {
 		lat: lat,
-		lon: lng
+		lon: lng,
+		latSpan: latSpan,
+		lngSpan: lngSpan,
+		radius: radius
 	};
 
 	const response = await oba.stopsForLocation.list(queryParams);