Merge pull request #51 from open-meteo/fallback-colorscale-fix

Author: terraputix

src/lib/utils/color-scales.ts

@@ -31,6 +31,7 @@ export const colorScales = {
 	cape: {
 		min: 0,
 		max: 4000,
+		scalefactor: 1,
 		colors: [
 			...interpolateColorScaleHSL(
 				['#009392', '#39b185', '#9ccb86', '#e9e29c', '#eeb479', '#e88471', '#cf597e'],
@@ -41,6 +42,7 @@ export const colorScales = {
 	cloud: {
 		min: 0,
 		max: 100,
+		scalefactor: 1,
 		colors: [
 			...interpolateColorScaleHSL(['#FFF', '#c3c2c2'], 100) // 0 to 100%
 		]
@@ -55,8 +57,9 @@ export const colorScales = {
 		]
 	},
 	pressure: {
-		min: 0,
-		max: 50,
+		min: 950,
+		max: 1050,
+		scalefactor: 2,
 		colors: [
 			...interpolateColorScaleHSL(['#4444FF', '#FFFFFF'], 25), // 950 to 1000hPa
 			...interpolateColorScaleHSL(['#FFFFFF', '#FF4444'], 25) // 1000hPa to 1050hPa
@@ -65,6 +68,7 @@ export const colorScales = {
 	relative: {
 		min: 0,
 		max: 100,
+		scalefactor: 1,
 		colors: [
 			...interpolateColorScaleHSL(
 				['#009392', '#39b185', '#9ccb86', '#e9e29c', '#eeb479', '#e88471', '#cf597e'].reverse(),
@@ -75,6 +79,7 @@ export const colorScales = {
 	shortwave: {
 		min: 0,
 		max: 1000,
+		scalefactor: 1,
 		colors: [
 			...interpolateColorScaleHSL(
 				['#009392', '#39b185', '#9ccb86', '#e9e29c', '#eeb479', '#e88471', '#cf597e'],
@@ -85,6 +90,7 @@ export const colorScales = {
 	temperature: {
 		min: -40,
 		max: 60,
+		scalefactor: 1,
 		colors: [
 			...interpolateColorScaleHSL(['purple', 'blue'], 40), // -40° to 0°
 			...interpolateColorScaleHSL(['blue', 'green'], 16), // 0° to 16°
@@ -96,6 +102,7 @@ export const colorScales = {
 	thunderstorm: {
 		min: 0,
 		max: 100,
+		scalefactor: 1,
 		colors: [
 			...interpolateColorScaleHSL(['blue', 'green'], 33), //
 			...interpolateColorScaleHSL(['green', 'orange'], 33), //
@@ -105,6 +112,7 @@ export const colorScales = {
 	uv: {
 		min: 0,
 		max: 12,
+		scalefactor: 1,
 		colors: [
 			...interpolateColorScaleHSL(
 				['#009392', '#39b185', '#9ccb86', '#e9e29c', '#eeb479', '#e88471', '#cf597e'],
@@ -115,6 +123,7 @@ export const colorScales = {
 	wind: {
 		min: 0,
 		max: 40,
+		scalefactor: 1,
 		colors: [
 			...interpolateColorScaleHSL(['blue', 'green'], 10), // 0 to 10kn
 			...interpolateColorScaleHSL(['green', 'orange'], 10), // 10 to 20kn

src/routes/+page.svelte

@@ -513,6 +513,7 @@
 				return value;
 			}
 		}
+		return colorScales['temperature'];
 	});
 
 	let colors = $derived(colorScale.colors.reverse());

src/worker.ts

@@ -84,15 +84,12 @@ const OPACITY = Number(import.meta.env.VITE_TILE_OPACITY);
 // };
 
 const getColor = (v: string, px: number): number[] => {
-	if (v.startsWith('temperature')) {
-		// increase minimum temperature by 40, since scale starts at -40
-		return colors[Math.max(0, Math.floor(px + 40))];
-	} else if (v.startsWith('pressure')) {
-		// increase minimum index by 950
-		return colors[Math.min(colors.length - 1, Math.max(0, Math.floor((px - 950) / 2)))];
-	} else {
-		return colors[Math.min(colors.length - 1, Math.max(0, Math.floor(px)))];
-	}
+	return colorsObj.colors[
+		Math.min(
+			colorsObj.colors.length - 1,
+			Math.max(0, Math.floor((px - colorsObj.min) / colorsObj.scalefactor))
+		)
+	];
 };
 
 const getOpacity = (v: string, px: number, dark: boolean): number => {
@@ -137,7 +134,7 @@ const getIndexAndFractions = (
 	);
 };
 
-let colors;
+let colorsObj;
 self.onmessage = async (message) => {
 	if (message.data.type == 'GT') {
 		const key = message.data.key;
@@ -154,8 +151,7 @@ self.onmessage = async (message) => {
 		const rgba = new Uint8ClampedArray(pixels * 4);
 		const dark = message.data.dark;
 
-		const colorsObject = colorScales[variable.value.split('_')[0]] ?? colors['temperature'];
-		colors = colorsObject.colors;
+		colorsObj = colorScales[variable.value.split('_')[0]] ?? colorScales['temperature'];
 
 		let projectionGrid = null;
 		if (domain.grid.projection) {