From 2e241304c004e9275aa8662c373af961598049d1 Mon Sep 17 00:00:00 2001
From: Jonah <73760377+jonerrr@users.noreply.github.com>
Date: Sun, 15 Dec 2024 09:01:06 -0500
Subject: [PATCH] use sdf png

---
 src/lib/Routes.svelte   |   2 +-
 src/lib/Trips.svelte    |  55 ++++++++++++++++++++--------------
 src/routes/+page.svelte |  64 +++++++++++++++++++---------------------
 static/bus_sdf.png      | Bin 0 -> 2863 bytes
 4 files changed, 65 insertions(+), 56 deletions(-)
 create mode 100644 static/bus_sdf.png

diff --git a/src/lib/Routes.svelte b/src/lib/Routes.svelte
index 6a62a3a..4c60cca 100644
--- a/src/lib/Routes.svelte
+++ b/src/lib/Routes.svelte
@@ -34,7 +34,7 @@
 			// 	17,
 			// 	10
 			// ],
-			'line-width': 4,
+			'line-width': 3,
 
 			'line-color': ['get', 'color'],
 			'line-opacity': 1.0
diff --git a/src/lib/Trips.svelte b/src/lib/Trips.svelte
index 3cfed36..1ac5295 100644
--- a/src/lib/Trips.svelte
+++ b/src/lib/Trips.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { GeoJSON, Popup, SymbolLayer } from 'svelte-maplibre';
+	import { mode } from 'mode-watcher';
 	import { env } from '$env/dynamic/public';
 
 	interface Props {
@@ -66,43 +67,53 @@
 		id="trips"
 		hoverCursor="pointer"
 		{filter}
-		layout={{
-			// 'icon-image': ['match', ['get', 'direction'], 0, 'bus_right', 1, 'bus_left', 'bus_left'],
-			// 'icon-image': 'bus_white_left',
-			// 'icon-image': [
-			// 	'case',
-			// 	['>', ['get', 'passengers'], 50],
-			// 	'bus_full',
-			// 	['>', ['get', 'passengers'], 30],
-			// 	'bus_half_full',
-			// 	'bus_white_left' // default color
-			// ],
-			'icon-image': [
+		paint={{
+			'icon-color': [
 				'case',
-				// If capacity is 0, use 'bus_white_left'
-				// ['==', ['get', 'capacity'], 0],
-				// 'bus_white_left',
-
 				// Calculate passengers / capacity with coalesce to handle nulls
 				[
 					'>',
 					['/', ['coalesce', ['get', 'passengers'], 0], ['coalesce', ['get', 'capacity'], 1]],
 					0.5
 				],
-				'bus_full',
+				'#b91c1c',
 
 				[
 					'>',
 					['/', ['coalesce', ['get', 'passengers'], 0], ['coalesce', ['get', 'capacity'], 1]],
 					0.3
 				],
-				'bus_half_full',
+				'#facc15',
+				// default
+				$mode !== 'light' ? '#FFFFFF' : '#000000'
+			]
+			// 'icon-color': $mode !== 'light' ? '#FFFFFF' : '#000000'
+		}}
+		layout={{
+			// 'icon-image': ['match', ['get', 'direction'], 0, 'bus_right', 1, 'bus_left', 'bus_left'],
+			// 'icon-image': [
+			// 	'case',
+			// 	// Calculate passengers / capacity with coalesce to handle nulls
+			// 	[
+			// 		'>',
+			// 		['/', ['coalesce', ['get', 'passengers'], 0], ['coalesce', ['get', 'capacity'], 1]],
+			// 		0.5
+			// 	],
+			// 	'bus_full',
+
+			// 	[
+			// 		'>',
+			// 		['/', ['coalesce', ['get', 'passengers'], 0], ['coalesce', ['get', 'capacity'], 1]],
+			// 		0.3
+			// 	],
+			// 	'bus_half_full',
+			// 	// Default icon if none of the above conditions are met
+			// 	'bus_white_left'
+			// ],
 
-				// Default icon if none of the above conditions are met
-				'bus_white_left'
-			],
+			'icon-image': 'bus_sdf',
 			// 'icon-size': ['interpolate', ['exponential', 0.5], ['zoom'], 8, 0.05, 17, 0.1],
-			'icon-size': 0.1,
+			'icon-size': 0.15,
 			'icon-rotate': ['coalesce', ['get', 'bearing'], 0],
 			'icon-allow-overlap': show_overlapping
 		}}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b7a8ae0..352ec3f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,12 +9,6 @@
 	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';
-	// import RoutesCool from '$lib/light-version/Routes.svelte';
-
-	// let map: maplibregl.Map | undefined = $state();
-	// let loaded: boolean = $state(false);
 	let map = $state<maplibregl.Map>();
 
 	onMount(() => {
@@ -36,7 +30,7 @@
 
 		const filter: maplibregl.ExpressionSpecification = ['all'];
 		// need to coalesce bc some values are null
-		if (!show_unknown)  filter.push(['!=', ['coalesce', ['get', 'passengers'], -1], -1]);
+		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]);
 
@@ -73,11 +67,23 @@
 				</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" />
+					<input
+						bind:value={min_val}
+						type="number"
+						inputmode="numeric"
+						min="0"
+						class="w-16 rounded border border-neutral-900 dark:border-neutral-100"
+					/>
 				</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" />
+					<input
+						bind:value={max_val}
+						type="number"
+						inputmode="numeric"
+						min="0"
+						class="w-16 rounded border border-neutral-900 dark:border-neutral-100"
+					/>
 				</label>
 			</div>
 		{/if}
@@ -107,30 +113,22 @@
 		// const bus_up = await map.loadImage($mode !== 'light' ? '/bus-up-white.png' : '/bus-up.png');
 		// map.addImage('bus_up', bus_up.data);
 
-		const images = [
-			`bus_${$mode !== 'light' ? 'white' : 'black'}_left`,
-			// `but_white_right`,
-			'bus_full',
-			'bus_half_full'
-		];
-
-		for (const img of images) {
-			const image = await map.loadImage(`/${img}.png`);
-			map.addImage(img, image.data);
-		}
-
-		// const bus_right = await map.loadImage(
-		// 	$mode !== 'light' ? '/bus_white_right.png' : '/bus_black_right.png'
-		// );
-		// map.addImage('bus_right', bus_right.data);
-
-		// const bus_left = await map.loadImage(
-		// 	$mode !== 'light' ? '/bus_white_left.png' : '/bus_black_left.png'
-		// );
-		// map.addImage('bus_left', bus_left.data);
-
-		// const stop = await map.loadImage($mode !== 'light' ? '/bus_stop.png' : '/bus_stop.png');
-		// map.addImage('bus_stop', stop.data);
+		// const images = [
+		// 	`bus_${$mode !== 'light' ? 'white' : 'black'}_left`,
+		// 	// `but_white_right`,
+		// 	'bus_full',
+		// 	'bus_half_full'
+		// ];
+
+		// Promise.all([
+		// 	...images.map(async (img) => {
+		// 		const image = await map.loadImage(`/${img}.png`);
+		// 		map.addImage(img, image.data);
+		// 	})
+		// ]);
+		// generated using https://jobtalle.com/SDFMaker/
+		const img_sdf = await map.loadImage('/bus_sdf.png');
+		map.addImage('bus_sdf', img_sdf.data, { sdf: true });
 	}}
 	center={[-74.006, 40.7128]}
 	maxBounds={[
diff --git a/static/bus_sdf.png b/static/bus_sdf.png
new file mode 100644
index 0000000000000000000000000000000000000000..7744def66a7bf222bfef28fec722ca1df5ff35cf
GIT binary patch
literal 2863
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
ZwLW3KySFMv*!-ITmS)zbg+#ZIe*mtoXNmv-

literal 0
HcmV?d00001