add filters

package.json

@@ -18,14 +18,14 @@
 		"@sveltejs/vite-plugin-svelte": "^5.0.2",
 		"@types/eslint": "^9.6.1",
 		"autoprefixer": "^10.4.20",
-		"eslint": "^9.16.0",
+		"eslint": "^9.17.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.1",
 		"globals": "^15.13.0",
 		"postcss": "^8.4.49",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.2",
-		"svelte": "^5.12.0",
+		"svelte": "^5.13.0",
 		"svelte-check": "^4.1.1",
 		"tailwindcss": "^3.4.16",
 		"tslib": "^2.8.1",

src/lib/Trips.svelte

@@ -2,7 +2,14 @@
 	import { GeoJSON, Popup, SymbolLayer } from 'svelte-maplibre';
 	import { env } from '$env/dynamic/public';
 
-	const { geojson, map }: { geojson: string; map: maplibregl.Map } = $props();
+	interface Props {
+		geojson: string;
+		map: maplibregl.Map;
+		filter?: maplibregl.ExpressionSpecification;
+		show_overlapping: boolean;
+	}
+
+	const { geojson, map, filter, show_overlapping }: Props = $props();
 	// TODO: use GeoJSON type
 	interface Trip {
 		id: string;
@@ -17,8 +24,6 @@
 		vehicle_id: string;
 	}
 
-	let clicked_feature = $state<Trip>();
-
 	// $effect(() => {
 	// 	console.log(map.getStyle().layers);
 	// });
@@ -60,6 +65,7 @@
 	<SymbolLayer
 		id="trips"
 		hoverCursor="pointer"
+		{filter}
 		layout={{
 			// 'icon-image': ['match', ['get', 'direction'], 0, 'bus_right', 1, 'bus_left', 'bus_left'],
 			// 'icon-image': 'bus_white_left',
@@ -95,11 +101,10 @@
 				// Default icon if none of the above conditions are met
 				'bus_white_left'
 			],
-
 			// 'icon-size': ['interpolate', ['exponential', 0.5], ['zoom'], 8, 0.05, 17, 0.1],
 			'icon-size': 0.1,
 			'icon-rotate': ['coalesce', ['get', 'bearing'], 0],
-			'icon-allow-overlap': true
+			'icon-allow-overlap': show_overlapping
 		}}
 	>
 		<Popup>

src/routes/+error.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+</script>
+
+<div class="flex flex-col justify-center items-center">
+	<h1 class="text-red-400 text-4xl">{$page.status}: {$page.error!.message}</h1>
+</div>

src/routes/+layout.svelte

@@ -1,17 +1,13 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
 	import type { Snippet } from 'svelte';
 	import '../app.css';
 	import { ModeWatcher } from 'mode-watcher';
 
 	interface Props {
 		children: Snippet;
 	}
-
 	let { children }: Props = $props();
 </script>
 
-{#if browser}
-	<ModeWatcher />
-{/if}
+<ModeWatcher />
 {@render children()}

src/routes/+page.svelte

@@ -7,6 +7,7 @@
 	import Routes from '$lib/Routes.svelte';
 	import Trips from '$lib/Trips.svelte';
 	import Stops from '$lib/Stops.svelte';
+	import { slide } from 'svelte/transition';
 
 	// import StopsCool from '$lib/light-version/Stops.svelte';
 	// import TripsCool from '$lib/light-version/Trips.svelte';
@@ -25,10 +26,63 @@
 		return () => clearInterval(interval);
 	});
 
+	let show_overlapping = $state(true);
+	let show_unknown = $state(true);
+	let min_val = $state<number>();
+	let max_val = $state<number>();
+
+	const trips_filter: maplibregl.ExpressionSpecification | undefined = $derived.by(() => {
+		// if (!min_val && !max_val) return undefined;
+
+		const filter: maplibregl.ExpressionSpecification = ['all'];
+		// need to coalesce bc some values are null
+		if (!show_unknown)  filter.push(['!=', ['coalesce', ['get', 'passengers'], -1], -1]);
+		if (min_val) filter.push(['>=', ['coalesce', ['get', 'passengers'], 0], min_val]);
+		if (max_val) filter.push(['<=', ['coalesce', ['get', 'passengers'], 0], max_val]);
+
+		return filter;
+	});
+
+	let filters_open = $state(true);
+
 	// TODO: set line thickness of routes to prevent overlapping
 	// maybe use https://stackoverflow.com/questions/72251218/variable-line-offset-in-mapbox line offset to prevent overlapping
 </script>
 
+<div class="absolute z-50 top-0 left-0">
+	<div class="flex flex-col gap-1 p-2 m-2 rounded-lg bg-white/50 dark:bg-black/50 backdrop-blur-md">
+		<div class="flex justify-between gap-1 items-center min-w-52">
+			<div class="text-lg font-semibold">Filters</div>
+			<button
+				onclick={() => {
+					filters_open = !filters_open;
+				}}
+				class="underline text-sm text-blue-500 hover:text-blue-700"
+				>{filters_open ? 'Hide' : 'Show'}</button
+			>
+		</div>
+		{#if filters_open}
+			<div class="flex flex-col gap-1" transition:slide>
+				<label class="grid grid-cols-[1fr,auto] items-center gap-2">
+					<span>Overlapping</span>
+					<input bind:checked={show_overlapping} type="checkbox" />
+				</label>
+				<label class="grid grid-cols-[1fr,auto] items-center gap-2">
+					<span>Unknown passengers</span>
+					<input bind:checked={show_unknown} type="checkbox" />
+				</label>
+				<label class="grid grid-cols-[1fr,auto] items-center gap-2">
+					<span>Min passengers</span>
+					<input bind:value={min_val} type="number" inputmode="numeric" min="0" class="w-16" />
+				</label>
+				<label class="grid grid-cols-[1fr,auto] items-center gap-2">
+					<span>Max passengers</span>
+					<input bind:value={max_val} type="number" inputmode="numeric" min="0" class="w-16" />
+				</label>
+			</div>
+		{/if}
+	</div>
+</div>
 <!-- diffStyleUpdates -->
 <MapLibre
 	bind:map
@@ -102,13 +156,5 @@
 
 	<Routes geojson={$page.data.routes} />
 	<Stops geojson={$page.data.stops} />
-	<Trips geojson={$page.data.trips} {map} />
+	<Trips geojson={$page.data.trips} map={map!} {show_overlapping} filter={trips_filter} />
 </MapLibre>
-
-<!-- <style>
-	:global(.maplibregl-popup-content) {
-		background-color: var(--color-bg);
-		color: var(--color-text);
-		padding: 0px;
-	}
-</style> -->