add position toggle and try something with pressure lines

Author: Vincent van der Wal

src/main.ts

@@ -27,6 +27,7 @@ const TILE_SIZE = Number(import.meta.env.VITE_TILE_SIZE);
 let map: maplibregl.Map;
 const infoBox: HTMLElement | null = document.getElementById('info_box');
 const mapContainer: HTMLElement | null = document.getElementById('map_container');
+let popup: maplibregl.Popup | undefined;
 
 let omUrl: string;
 let timeSelected = new Date();
@@ -95,6 +96,10 @@ const changeOMfileURL = () => {
 	variableSelector.replaceChildren('');
 	variableSelector.innerHTML = `${getVariableOptions()}`;
 
+	if (popup) {
+		popup.remove();
+	}
+
 	if (!domain.variables.includes(variable.value)) {
 		variable = variables.find((v) => v.value === domain.variables[0]) as Variable;
 	}
@@ -155,6 +160,19 @@ if (mapContainer) {
 
 	map.touchZoomRotate.disableRotation();
 
+	// Add geolocate control to the map.
+	map.addControl(
+		new maplibregl.GeolocateControl({
+			fitBoundsOptions: {
+				maxZoom: 9.5
+			},
+			positionOptions: {
+				enableHighAccuracy: true
+			},
+			trackUserLocation: true
+		})
+	);
+
 	map.on('load', async () => {
 		omUrl = getOMUrl();
 		source = map.addSource('omFileSource', {
@@ -173,7 +191,6 @@ if (mapContainer) {
 			'road_area_pier'
 		);
 
-		let popup: maplibregl.Popup | undefined;
 		map.on('mousemove', function (e) {
 			if (showPopup) {
 				const coordinates = e.lngLat;
@@ -192,7 +209,11 @@ if (mapContainer) {
 					coordinates.lng
 				);
 				if (index) {
-					if (hideZero.includes(variable.value) && value <= 0.25) {
+					if (
+						(hideZero.includes(variable.value) &&
+							value <= 0.25) ||
+						!value
+					) {
 						popup.remove();
 					} else {
 						let string = '';

src/worker.ts

@@ -320,7 +320,14 @@ self.onmessage = async (message) => {
 						if (variable.value == 'cloud_cover') {
 							rgba[4 * ind + 3] = 255 * (px / 100);
 						} else if (variable.value == 'precipitation') {
-							rgba[4 * ind + 3] = 50 + 205 * (px / 10);
+							rgba[4 * ind + 3] =
+								50 + 180 * Math.min(px / 12, 10);
+						} else if (variable.value == 'pressure_msl') {
+							if (px % 1 > 0.05 || px % 1 > 0.95) {
+								rgba[4 * ind + 3] = 0;
+							} else {
+								rgba[4 * ind + 3] = 255;
+							}
 						} else {
 							rgba[4 * ind + 3] = 255 * (OPACITY / 100);
 						}