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 0000000..7744def Binary files /dev/null and b/static/bus_sdf.png differ