feat: crepuscule / shademap

package.json

@@ -44,10 +44,12 @@
 		"@vitest/coverage-v8": "^4.0.17",
 		"bits-ui": "^2.15.2",
 		"clsx": "^2.1.1",
+		"crepuscule": "file:../../forks/crepuscule",
 		"eslint": "^9.39.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^3.13.0",
 		"globals": "^17.0.0",
+		"mapbox-gl-shadow-simulator": "^0.67.0",
 		"maplibre-gl": "^5.15.0",
 		"mdsvex": "^0.12.3",
 		"mode-watcher": "^1.1.0",
@@ -71,4 +73,4 @@
 		"vitest": "^4.0.4",
 		"vitest-browser-svelte": "^2.0.1"
 	}
-}
+}

src/lib/components/time/time-selector.svelte

@@ -14,6 +14,7 @@
 		modelRun,
 		modelRunLocked,
 		preferences,
+		shadeMap,
 		time
 	} from '$lib/stores/preferences';
 	import { inProgress, latest, metaJson } from '$lib/stores/preferences';
@@ -289,6 +290,7 @@
 		}
 
 		$time = new SvelteDate(date);
+		$shadeMap?.setDate($time);
 		currentDate = date;
 		updateUrl('time', formatISOWithoutTimezone($time));
 		await checkClosestModelRun();

src/lib/constants.ts

@@ -4,21 +4,22 @@ export const DEFAULT_VARIABLE = 'temperature_2m';
 
 // Vector options defaults
 export const DEFAULT_VECTOR_OPTIONS = {
-	grid: false,
-	arrows: true,
-	contours: false,
-	breakpoints: true,
-	contourInterval: 2
+    grid: false,
+    arrows: true,
+    contours: false,
+    breakpoints: true,
+    contourInterval: 2
 };
 
 // Preferences defaults
 export const DEFAULT_PREFERENCES = {
-	globe: false,
-	terrain: false,
-	hillshade: false,
-	clipWater: false,
-	showScale: true,
-	timeSelector: true
+    globe: false,
+    terrain: false,
+    hillshade: false,
+    clipWater: false,
+    showScale: true,
+    crepuscule: false,
+    timeSelector: true
 };
 
 // Color hash default
@@ -36,10 +37,10 @@ export const DEFAULT_OPACITY = 75;
 
 // Complete default values for URL parameter checking
 export const COMPLETE_DEFAULT_VALUES: { [key: string]: boolean | string | number } = {
-	domain: DEFAULT_DOMAIN,
-	variable: DEFAULT_VARIABLE,
-	...DEFAULT_PREFERENCES,
-	...DEFAULT_VECTOR_OPTIONS
+    domain: DEFAULT_DOMAIN,
+    variable: DEFAULT_VARIABLE,
+    ...DEFAULT_PREFERENCES,
+    ...DEFAULT_VECTOR_OPTIONS
 };
 
 // Time constants
@@ -54,11 +55,11 @@ export const METADATA_REFRESH_INTERVAL = 5 * MILLISECONDS_PER_MINUTE; // 5 minut
 
 // Calendar display constants
 export const DAY_NAMES = [
-	'Sunday',
-	'Monday',
-	'Tuesday',
-	'Wednesday',
-	'Thursday',
-	'Friday',
-	'Saturday'
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
 ];

src/lib/stores/preferences.ts

@@ -1,6 +1,9 @@
 import { MediaQuery } from 'svelte/reactivity';
 import { type Writable, writable } from 'svelte/store';
 
+import type ShadeMap from 'mapbox-gl-shadow-simulator';
+
+
 import { setMode } from 'mode-watcher';
 import { type Persisted, persisted } from 'svelte-persisted-store';
 
@@ -61,6 +64,8 @@ export const helpOpen = writable(false);
 export const metaJson: Writable<DomainMetaDataJson | undefined> = writable(undefined);
 export const modelRunLocked = writable(false);
 
+export const shadeMap = writable<ShadeMap | null>(null);
+
 export const resetStates = async () => {
 	modelRunLocked.set(false);
 

src/routes/+page.svelte

@@ -9,6 +9,7 @@
 		omProtocol,
 		updateCurrentBounds
 	} from '@openmeteo/mapbox-layer';
+	import ShadeMap from 'mapbox-gl-shadow-simulator';
 	import { type RequestParameters } from 'maplibre-gl';
 	import * as maplibregl from 'maplibre-gl';
 	import 'maplibre-gl/dist/maplibre-gl.css';
@@ -28,6 +29,7 @@
 		resetStates,
 		resolution,
 		resolutionSet,
+		shadeMap,
 		time,
 		url
 	} from '$lib/stores/preferences';
@@ -142,9 +144,31 @@
 			if (getInitialMetaDataPromise) await getInitialMetaDataPromise;
 
 			addOmFileLayers();
+
 			addHillshadeSources();
 			$map.addControl(new HillshadeButton());
 
+			$shadeMap = new ShadeMap({
+				date: $time, // display shadows for current date
+				color: '#01112f', // shade color
+				opacity: 0.7, // opacity of shade color
+				apiKey: '', // obtain from https://shademap.app/about/,
+				terrainSource: {
+					tileSize: 256,
+					maxZoom: 15,
+
+					getSourceUrl: ({ x, y, z }) => {
+						return `https://tiles.mapterhorn.com/${z}/${x}/${y}.webp`;
+					},
+					getElevation: ({ r, g, b, a }) => {
+						return r * 256 + g + b / 256 - 32768;
+					}
+				},
+				debug: (msg) => {
+					console.log(new Date().toISOString(), msg);
+				}
+			}).addTo($map);
+
 			addPopup();
 			changeOMfileURL();
 		});