add more wind vars and color scales

Author: Vincent van der Wal

src/main.ts

@@ -125,8 +125,6 @@ let showTemp = false;
 if (mapContainer) {
 	maplibregl.addProtocol('om', omProtocol);
 
-	console.log(domains);
-
 	map = new maplibregl.Map({
 		container: mapContainer,
 		style: `https://maptiler.servert.nl/styles/basic-world-maps/style.json`,

src/om-protocol.ts

@@ -220,12 +220,15 @@ const initOMFile = async (url: string) => {
 	}
 
 	if (requestMultiple.includes(variable.value)) {
+		let reg = new RegExp(/wind_(\d+)m\.om/);
+		const matches = url.match(reg);
+
 		fileReader.backendu = new MemoryHttpBackend({
-			url: omUrl.replace('wind.om', 'wind_u_component_10m.om'),
+			url: omUrl.replace(matches[0], `wind_u_component_${matches[1]}m.om`),
 			maxFileSize: 500 * 1024 * 1024 // 500 MB
 		});
 		fileReader.backendv = new MemoryHttpBackend({
-			url: omUrl.replace('wind.om', 'wind_v_component_10m.om'),
+			url: omUrl.replace(matches[0], `wind_v_component_${matches[1]}m.om`),
 			maxFileSize: 500 * 1024 * 1024 // 500 MB
 		});
 		fileReader.readeru = await OmFileReader.create(fileReader.backendu).catch(() => {
@@ -244,7 +247,7 @@ const initOMFile = async (url: string) => {
 			const datau = await fileReader.readeru.read(OmDataType.FloatArray, ranges);
 			const datav = await fileReader.readerv.read(OmDataType.FloatArray, ranges);
 
-			const dataValues = [];
+			const dataValues: Float32Array<ArrayBuffer> = [];
 			const dataDirection: Float32Array<ArrayBuffer> = [];
 
 			for (let [i, dp] of datau.entries()) {

src/types.ts

@@ -77,6 +77,7 @@ export interface Domain {
 			  }
 			| Function;
 	};
+	variables: string[];
 }
 
 export interface DomainGroups {

src/utils/domains.ts

@@ -70,7 +70,14 @@ export const domains: Array<Domain> = [
 				this.center = getCenterPoint(this);
 				return this;
 			}
-		}
+		},
+		variables: [
+			'cloud_cover',
+			'precipitation',
+			'pressure_msl',
+			'relative_humidity_2m',
+			'shortwave_radiation'
+		]
 	},
 	// DMI
 	{

src/utils/variables.ts

@@ -1,13 +1,25 @@
 export const variables = [
-	{ value: 'temperature_2m', label: 'Temperature 2m' },
-	{ value: 'temperature_120m', label: 'Temperature 120m' },
+	{ value: 'cloud_cover', label: 'Cloud Cover' },
 
 	{ value: 'precipitation', label: 'Precipitation' },
-	{ value: 'cloud_cover', label: 'Cloud Cover' },
 	{ value: 'pressure_msl', label: 'Pressure Main Sea Level' },
-	{ value: 'wind', label: 'Wind 10m' },
+
+	{ value: 'relative_humidity_2m', label: 'Relative Humidity 2m' },
+
+	{ value: 'shortwave_radiation', label: 'Shortwave Solar Radiation' },
+
+	{ value: 'temperature_2m', label: 'Temperature 2m' },
+	{ value: 'temperature_120m', label: 'Temperature 120m' },
+
+	{ value: 'visibility', label: 'Visibility' },
+
+	{ value: 'wind_10m', label: 'Wind 10m' },
+	{ value: 'wind_40m', label: 'Wind 40m' },
+	{ value: 'wind_80m', label: 'Wind 80m' },
+	{ value: 'wind_120m', label: 'Wind 120m' },
+
 	{ value: 'wind_gusts_10m', label: 'Wind Gusts 10m' }
 ];
 
 export const hideZero = ['precipitation', 'cloud_cover'];
-export const requestMultiple = ['wind'];
+export const requestMultiple = ['wind_10m', 'wind_40m', 'wind_80m', 'wind_120m'];

src/worker.ts

@@ -1,6 +1,6 @@
 import { colorScale } from './utils/color-scales';
 
-import { hideZero } from './utils/variables';
+import { hideZero, requestMultiple } from './utils/variables';
 
 import { DynamicProjection, ProjectionGrid, type Projection } from './utils/projection';
 
@@ -133,10 +133,20 @@ self.onmessage = async (message) => {
 				min: 990,
 				max: 1020
 			});
-		} else {
+		} else if (variable.value == 'relative_humidity_2m') {
+			colors = colorScale({
+				min: 0,
+				max: 100
+			});
+		} else if (variable.value == 'shortwave_radiation') {
 			colors = colorScale({
 				min: 0,
-				max: 30
+				max: 1000
+			});
+		} else {
+			colors = colorScale({
+				min: -5,
+				max: 40
 			});
 		}
 
@@ -248,21 +258,25 @@ self.onmessage = async (message) => {
 			}
 		}
 
-		if (variable.value === 'wind') {
-			for (let i = 0; i < TILE_SIZE; i += TILE_SIZE / 16) {
-				for (let j = 0; j < TILE_SIZE; j += TILE_SIZE / 16) {
-					drawArrow(
-						rgba,
-						i,
-						j,
-						x,
-						y,
-						z,
-						nx,
-						domain,
-						projectionGrid,
-						direction
-					);
+		if (requestMultiple.includes(variable.value)) {
+			let reg = new RegExp(/wind_(\d+)m/);
+			const matches = variable.value.match(reg);
+			if (matches[0]) {
+				for (let i = 0; i < TILE_SIZE; i += TILE_SIZE / 16) {
+					for (let j = 0; j < TILE_SIZE; j += TILE_SIZE / 16) {
+						drawArrow(
+							rgba,
+							i,
+							j,
+							x,
+							y,
+							z,
+							nx,
+							domain,
+							projectionGrid,
+							direction
+						);
+					}
 				}
 			}
 		}