Skip to content

Commit

Permalink
use sdf png
Browse files Browse the repository at this point in the history
  • Loading branch information
jonerrr committed Dec 15, 2024
1 parent c37b09a commit 2e24130
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 56 deletions.
2 changes: 1 addition & 1 deletion src/lib/Routes.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
// 17,
// 10
// ],
'line-width': 4,
'line-width': 3,

'line-color': ['get', 'color'],
'line-opacity': 1.0
Expand Down
55 changes: 33 additions & 22 deletions src/lib/Trips.svelte
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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
}}
Expand Down
64 changes: 31 additions & 33 deletions src/routes/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -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]);
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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={[
Expand Down
Binary file added static/bus_sdf.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 2e24130

Please sign in to comment.