Skip to content

Commit e8cb1d8

Browse files
thurberthurber
committed
consistent colors; satellite basemap option
1 parent e7f60ec commit e8cb1d8

File tree

3 files changed

+70
-24
lines changed

3 files changed

+70
-24
lines changed

‎src/lib/components/StationChart.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
let {
1818
availableVariables = [],
1919
selectedStations = [],
20+
selectedStationsColorIndex = [],
2021
singleVariable = [],
2122
multiVariables = [],
2223
startDate,
@@ -127,7 +128,7 @@
127128
color: {
128129
legend: true,
129130
domain: selectedStations,
130-
range: COLORS,
131+
range: selectedStationsColorIndex.map(i => COLORS[i]),
131132
},
132133
marks: [
133134
Plot.lineY(data, { x: 'obsTimeUtc', y: selectedVariables[0].variable, z: 'stationID', stroke: 'stationID', interval }),

‎src/lib/components/StationMap.svelte‎

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
<script>
22
import { base } from '$app/paths';
3+
import Icon from "@iconify/svelte";
34
import { MapLibre, Popup, Marker } from 'svelte-maplibre';
45
import PopRock from './PopRock.svelte';
56
import { COLOR_CLASSES, STATION_TYPE_COLORS } from '$lib/colors';
67
8+
const MAP_STYLES = {
9+
"light": "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
10+
"satellite": "https://tiles.stadiamaps.com/styles/alidade_satellite.json",
11+
}
12+
713
let {
8-
selectedStations = $bindable([]),
14+
selectedStations = [],
15+
selectedStationsColorIndex = [],
916
toggleStation = () => {},
1017
} = $props();
1118
1219
let stations = $state();
1320
21+
let mapStyle = $state(MAP_STYLES.light);
22+
1423
$effect(() => {
1524
fetch(`${base}/data/station_locations.json`).then(d => d.json()).then(d => {
1625
stations = d;
@@ -26,7 +35,7 @@
2635
center={[-76.6, 39.3]}
2736
zoom={11}
2837
standardControls
29-
style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
38+
style={mapStyle}
3039
class="w-full h-full min-h-96 overflow-hidden"
3140
cooperativeGestures
3241
>
@@ -37,7 +46,7 @@
3746
class="
3847
rounded-full cursor-pointer border border-black
3948
{selectedStations.includes(properties.station_id)
40-
? `w-5 h-5 ${COLOR_CLASSES[selectedStations.indexOf(properties.station_id)]}`
49+
? `w-5 h-5 ${COLOR_CLASSES[selectedStationsColorIndex[selectedStations.indexOf(properties.station_id)]]}`
4150
: `w-3 h-3 ${STATION_TYPE_COLORS[properties.station_type]}`
4251
}
4352
"
@@ -51,16 +60,41 @@
5160
</MapLibre>
5261
<div
5362
class="
54-
absolute bottom-12 pointer-events-none
55-
bg-white border-gray-300 border p-2 flex flex-row items-center gap-2
63+
absolute bottom-12
64+
bg-white border-gray-300 border p-2 flex flex-row items-center gap-4
5665
"
5766
>
58-
<span>Station Type:</span>
59-
{#each Object.keys(STATION_TYPE_COLORS) as t}
60-
<div class="flex flex-row items-center gap-1">
61-
<div class="w-3 h-3 rounded-full border border-black {STATION_TYPE_COLORS[t]}"></div>
62-
<span>{t}</span>
63-
</div>
64-
{/each}
67+
<div class="flex flex-row items-center gap-2">
68+
<span>Base map:</span>
69+
<button
70+
disabled={mapStyle === MAP_STYLES.satellite}
71+
onclick={() => {mapStyle=MAP_STYLES.satellite}}
72+
class="
73+
border rounded-sm p-1
74+
{mapStyle === MAP_STYLES.satellite ? 'border-gray-400 text-gray-400 cursor-not-allowed' : 'border-blue-400 text-blue-400 shadow cursor-pointer'}
75+
"
76+
>
77+
<Icon class="" icon="gis:satellite-earth" width=24 height=24 />
78+
</button>
79+
<button
80+
disabled={mapStyle === MAP_STYLES.light}
81+
onclick={() => {mapStyle=MAP_STYLES.light}}
82+
class="
83+
border rounded-sm p-1
84+
{mapStyle === MAP_STYLES.light ? 'border-gray-400 text-gray-400 cursor-not-allowed' : 'border-blue-400 text-blue-400 shadow cursor-pointer'}
85+
"
86+
>
87+
<Icon class="" icon="emojione-monotone:world-map" width=24 height=24 />
88+
</button>
89+
</div>
90+
<div class="flex flex-row items-center gap-2">
91+
<span>Station Type:</span>
92+
{#each Object.keys(STATION_TYPE_COLORS) as t}
93+
<div class="flex flex-row items-center gap-1">
94+
<div class="w-3 h-3 rounded-full border border-black {STATION_TYPE_COLORS[t]}"></div>
95+
<span>{t}</span>
96+
</div>
97+
{/each}
98+
</div>
6599
</div>
66100
</div>

‎src/routes/+page.svelte‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@
1212
1313
const MAX_SELECTED = 6;
1414
15+
const SHOW_DEMO_MESSAGE = false;
16+
1517
let selectedStations = $state([]);
18+
let selectedStationsColorIndex = $state([]);
1619
1720
let startDate = $state('2025-03-01');
1821
let endDate = $state('2025-03-01');
@@ -24,11 +27,15 @@
2427
2528
const toggleStation = (stationId) => {
2629
if (selectedStations.includes(stationId)) {
27-
selectedStations = selectedStations.filter(s => s !== stationId)
30+
const idx = selectedStations.findIndex(s => s === stationId);
31+
selectedStations = selectedStations.filter(s => s !== stationId);
32+
selectedStationsColorIndex = selectedStationsColorIndex.filter((_, i) => i !== idx);
2833
}
2934
else {
3035
if (selectedStations.length < MAX_SELECTED) {
31-
selectedStations = [...selectedStations, stationId].sort();
36+
selectedStations = [...selectedStations, stationId];
37+
const nextIdx = Array(MAX_SELECTED).keys().find((_, i) => !selectedStationsColorIndex.includes(i))
38+
selectedStationsColorIndex = [...selectedStationsColorIndex, nextIdx];
3239
}
3340
else {
3441
errorMessage = `Please limit your selection to ${MAX_SELECTED} stations.`;
@@ -49,21 +56,24 @@
4956
<div
5057
class="w-full h-auto min-h-screen flex flex-col items-stretch"
5158
>
52-
<div
53-
class="w-full h-8 bg-rose-700 shadow flex items-center justify-center border-b border-b-black/5"
54-
>
55-
<p class="text-white text-sm">
56-
This is a demo site under active development. Please excuse any bugs!
57-
</p>
58-
</div>
59+
{#if SHOW_DEMO_MESSAGE}
60+
<div
61+
class="w-full h-8 bg-rose-700 shadow flex items-center justify-center border-b border-b-black/5"
62+
>
63+
<p class="text-white text-sm">
64+
This is a demo site under active development. Please excuse any bugs!
65+
</p>
66+
</div>
67+
{/if}
5968
<div
6069
class="
6170
w-full h-auto flex-1 flex flex-col lg:flex-row items-stretch flex-wrap
6271
"
6372
>
6473
<div class="flex-1 w-full h-auto min-h-96 lg:min-h-[calc(100vh-2rem)] min-w-96 max-h-96 lg:max-h-none">
6574
<StationMap
66-
bind:selectedStations
75+
{selectedStations}
76+
{selectedStationsColorIndex}
6777
toggleStation={toggleStation}
6878
/>
6979
</div>
@@ -101,7 +111,7 @@
101111
{#each selectedStations as s, i}
102112
<div class="px-2 py-1 rounded-lg bg-gray-200 shadow-sm flex flex-row items-center gap-1">
103113
<div
104-
class="w-3 h-3 rounded-full border border-black {COLOR_CLASSES[i]}"
114+
class="w-3 h-3 rounded-full border border-black {COLOR_CLASSES[selectedStationsColorIndex[i]]}"
105115
></div>
106116
<span class="text-black font-medium">
107117
{s}
@@ -133,6 +143,7 @@
133143
{startDate}
134144
{endDate}
135145
{selectedStations}
146+
{selectedStationsColorIndex}
136147
{singleVariable}
137148
{multiVariables}
138149
/>

0 commit comments

Comments
 (0)