feat: isobands

package.json

@@ -30,7 +30,7 @@
 	"devDependencies": {
 		"@lucide/svelte": "^1.7.0",
 		"@openmeteo/file-reader": "^0.0.15",
-		"@openmeteo/weather-map-layer": "github:open-meteo/weather-map-layer#e65e07029794285a64ec19f5f96e0e0c18a3e539",
+		"@openmeteo/weather-map-layer": "github:open-meteo/weather-map-layer#12cdd8f1b1316bf9345ab6276498a02c8134b5ad",
 		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/kit": "^2.57.1",
 		"@sveltejs/vite-plugin-svelte": "^7.0.0",

src/lib/components/settings/isobands-settings.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+
+	import { vectorOptions } from '$lib/stores/vector';
+
+	import { Label } from '$lib/components/ui/label';
+	import { Switch } from '$lib/components/ui/switch';
+
+	import { changeOMfileURL } from '$lib/layers';
+	import { updateUrl } from '$lib/url';
+
+	let isobands = $derived($vectorOptions.isobands);
+</script>
+
+<div>
+	<h2 class="text-lg font-bold">Isobands settings</h2>
+	<div class="mt-3 flex gap-3">
+		<Switch
+			id="isobands"
+			class="cursor-pointer"
+			bind:checked={$vectorOptions.isobands}
+			onCheckedChange={() => {
+				updateUrl('isobands', String(isobands));
+				changeOMfileURL();
+				toast.info(
+					'Isobands turned ' +
+						(isobands ? 'on' : 'off') +
+						(isobands ? ' (raster source disabled)' : '')
+				);
+			}}
+		/>
+		<Label class="cursor-pointer" for="isobands">Isobands {isobands ? 'on' : 'off'}</Label>
+	</div>
+</div>

src/lib/components/settings/settings.svelte

@@ -7,6 +7,7 @@
 	import CacheSettings from './cache-settings.svelte';
 	import ContourSettings from './contour-settings.svelte';
 	import GridSettings from './grid-settings.svelte';
+	import IsobandsSettings from './isobands-settings.svelte';
 	import OpacitySetting from './opacity-setting.svelte';
 	import PopupSettings from './popup-settings.svelte';
 	import StateSettings from './state-settings.svelte';
@@ -22,6 +23,7 @@
 			<GridSettings />
 			<ArrowsSettings />
 			<ContourSettings />
+			<IsobandsSettings />
 			<TileSizeSettings />
 			<PopupSettings />
 			<WaterClipSetting />

src/lib/constants.ts

@@ -7,6 +7,7 @@ export const DEFAULT_VECTOR_OPTIONS = {
 	grid: false,
 	arrows: true,
 	contours: false,
+	isobands: false,
 	breakpoints: true,
 	contourInterval: 2
 };

src/lib/layers.ts

@@ -206,6 +206,37 @@ const vectorContourLayer = (): SlotLayer => ({
 	}
 });
 
+const vectorIsobandFillLayer = (): SlotLayer => ({
+	id: 'omVectorIsobandFillLayer',
+	opacityProp: 'fill-opacity',
+	commitOpacity: getRasterOpacity(),
+	add: (map, sourceId, layerId, beforeLayer) => {
+		const vectorOptions = get(vO);
+		if (!vectorOptions.isobands) return;
+		map.addLayer(
+			{
+				id: layerId,
+				type: 'fill',
+				source: sourceId,
+				'source-layer': 'isobands',
+				paint: {
+					'fill-opacity': 0,
+					'fill-opacity-transition': { duration: 2, delay: 0 },
+					'fill-antialias': false,
+					'fill-color': [
+						'rgba',
+						['get', 'r'],
+						['get', 'g'],
+						['get', 'b'],
+						['/', ['get', 'a'], 255]
+					]
+				}
+			},
+			beforeLayer
+		);
+	}
+});
+
 const vectorContourLabelsLayer = (): SlotLayer => ({
 	id: 'omVectorContourLayerLabels',
 	opacityProp: 'text-opacity',
@@ -271,17 +302,28 @@ export const createManagers = (): void => {
 			toast.warning('Loading raster data might be limited by bandwidth or upstream server speed.')
 	});
 
+	const vectorOptions = get(vO);
 	vectorManager = new SlotManager(map, {
 		sourceIdPrefix: 'omVectorSource',
 		beforeLayer: preferences.clipWater ? BEFORE_LAYER_VECTOR_WATER_CLIP : BEFORE_LAYER_VECTOR,
 		layerFactory: () => [
+			vectorIsobandFillLayer(),
 			vectorArrowLayer(),
 			vectorGridLayer(),
 			vectorContourLayer(),
 			vectorContourLabelsLayer()
 		],
 		sourceSpec: (sourceUrl) => ({ url: sourceUrl, type: 'vector' }),
-		removeDelayMs: 250
+		removeDelayMs: 250,
+		...(vectorOptions.isobands
+			? {
+					onCommit: () => {
+						loading.set(false);
+						refreshPopup();
+					},
+					onError: () => loading.set(false)
+				}
+			: {})
 	});
 };
 
@@ -294,7 +336,8 @@ export const addOmFileLayers = (): void => {
 	if (!map) return;
 	const omUrl = getOMUrl();
 	createManagers();
-	rasterManager?.update('om://' + omUrl);
+	const vectorOptions = get(vO);
+	if (!vectorOptions.isobands) rasterManager?.update('om://' + omUrl);
 	vectorManager?.update('om://' + omUrl);
 };
 
@@ -314,6 +357,7 @@ export const changeOMfileURL = (vectorOnly = false, rasterOnly = false): void =>
 	);
 	rasterManager?.setBeforeLayer(preferences.hillshade ? HILLSHADE_LAYER : BEFORE_LAYER_RASTER);
 
-	if (!vectorOnly) rasterManager?.update('om://' + omUrl);
+	const vectorOptions = get(vO);
+	if (!vectorOnly && !vectorOptions.isobands) rasterManager?.update('om://' + omUrl);
 	if (!rasterOnly) vectorManager?.update('om://' + omUrl);
 };

src/lib/stores/vector.ts

@@ -8,6 +8,7 @@ export interface VectorOptions {
 	grid: boolean;
 	arrows: boolean;
 	contours: boolean;
+	isobands: boolean;
 	breakpoints: boolean;
 	contourInterval: number;
 }

src/lib/url.ts

@@ -177,6 +177,7 @@ export const getOMUrl = () => {
 	if (vectorOptions.grid) result += '&grid=true';
 	if (vectorOptions.arrows) result += '&arrows=true';
 	if (vectorOptions.contours) result += '&contours=true';
+	if (vectorOptions.isobands) result += '&isobands=true';
 	if (vectorOptions.contours && !vectorOptions.breakpoints)
 		result += `&intervals=${vectorOptions.contourInterval}`;