move types to types.ts and use vectorOptions instead of url state

Author: vincentvdwal

examples/vector/wind-arrows.html

@@ -53,7 +53,7 @@
 			});
 
 			// s3 storage structure: /data_spatial/{domain}/{modelRun /year/month/day/time}Z/{selectedTime year-month-day-time.om}?variable={variable}
-			const omUrl = `https://map-tiles.open-meteo.com/data_spatial/dwd_icon/2025/10/27/1200Z/2025-10-27T1200.om?variable=wind_u_component_10m`;
+			const omUrl = `https://map-tiles.open-meteo.com/data_spatial/dwd_icon/2025/11/20/1200Z/2025-11-20T1200.om?variable=wind_u_component_10m`;
 
 			map.on('load', () => {
 				map.addSource('omFileRasterSource', {
@@ -70,7 +70,7 @@
 				});
 
 				map.addSource('omFileVectorSource', {
-					url: 'om://' + omUrl + '&arrows=true',
+					url: 'om://' + omUrl,
 					type: 'vector'
 				});
 

src/om-protocol.ts

@@ -12,67 +12,18 @@ import { OMapsFileReader } from './om-file-reader';
 import { capitalize } from './utils';
 import { TilePromise, WorkerPool } from './worker-pool';
 
-import type { ColorScales, DimensionRange, Domain, TileIndex, TileJSON, Variable } from './types';
-
-interface OmProtocolInstance {
-	colorScales: ColorScales;
-	domainOptions: Domain[];
-	variableOptions: Variable[];
-	resolutionFactor: 0.5 | 1 | 2;
-	omFileReader: OMapsFileReader;
-
-	// per-URL state:
-	stateByKey: Map<string, OmUrlState>;
-}
-
-interface OmUrlState {
-	omUrl: string;
-	dark: boolean;
-	partial: boolean;
-	tileSize: number;
-	interval: number;
-	domain: Domain;
-	variable: Variable;
-	mapBounds: number[];
-	ranges: DimensionRange[] | null;
-
-	data: Data | null;
-	dataPromise: Promise<Data> | null;
-	lastAccess: number;
-}
-
-export interface OmParseUrlCallbackResult {
-	variable: Variable;
-	ranges: DimensionRange[] | null;
-	omUrl: string;
-	dark: boolean;
-	partial: boolean;
-	interval: number;
-	domain: Domain;
-	mapBounds: number[];
-}
-
-export interface OmProtocolSettings {
-	tileSize: number;
-	useSAB: boolean;
-	colorScales: ColorScales;
-	domainOptions: Domain[];
-	variableOptions: Variable[];
-	resolutionFactor: 0.5 | 1 | 2;
-	parseUrlCallback: (
-		url: string,
-		domainOptions: Domain[],
-		variableOptions: Variable[]
-	) => OmParseUrlCallbackResult;
-	postReadCallback:
-		| ((omFileReader: OMapsFileReader, omUrl: string, data: Data) => void)
-		| undefined;
-}
-
-export interface Data {
-	values: Float32Array | undefined;
-	directions: Float32Array | undefined;
-}
+import type {
+	Data,
+	DimensionRange,
+	Domain,
+	OmParseUrlCallbackResult,
+	OmProtocolInstance,
+	OmProtocolSettings,
+	OmUrlState,
+	TileIndex,
+	TileJSON,
+	Variable
+} from './types';
 
 setupGlobalCache();
 const workerPool = new WorkerPool();
@@ -215,7 +166,8 @@ const getTile = async (
 	state: OmUrlState,
 	data: Data,
 	omUrl: string,
-	type: 'image' | 'arrayBuffer'
+	type: 'image' | 'arrayBuffer',
+	settings: OmProtocolSettings
 ): TilePromise => {
 	const key = `${omUrl}/${state.tileSize}/${z}/${x}/${y}`;
 
@@ -236,7 +188,8 @@ const getTile = async (
 			protocol.colorScales?.custom ??
 			protocol.colorScales[state.variable.value] ??
 			getColorScale(state.variable.value),
-		mapBounds: state.mapBounds
+		mapBounds: state.mapBounds,
+		vectorOptions: settings.vectorOptions
 	});
 };
 
@@ -258,7 +211,7 @@ const renderTile = async (
 	const y = parseInt(result[4]);
 
 	const data = await ensureData(omUrl, protocol, state, settings);
-	return getTile({ z, x, y }, protocol, state, data, omUrl, type);
+	return getTile({ z, x, y }, protocol, state, data, omUrl, type, settings);
 };
 
 const getTilejson = async (fullUrl: string, state: OmUrlState): Promise<TileJSON> => {
@@ -324,7 +277,12 @@ export const defaultOmProtocolSettings: OmProtocolSettings = {
 	variableOptions: defaultVariableOptions,
 	resolutionFactor: 1,
 	parseUrlCallback: parseOmUrl,
-	postReadCallback: undefined
+	postReadCallback: undefined,
+	vectorOptions: {
+		grid: false,
+		arrows: true,
+		contours: false
+	}
 };
 
 export const omProtocol = async (

src/types.ts

@@ -1,3 +1,72 @@
+import { OMapsFileReader } from './om-file-reader';
+
+export interface OmProtocolInstance {
+	colorScales: ColorScales;
+	domainOptions: Domain[];
+	variableOptions: Variable[];
+	resolutionFactor: 0.5 | 1 | 2;
+	omFileReader: OMapsFileReader;
+
+	// per-URL state:
+	stateByKey: Map<string, OmUrlState>;
+}
+
+export interface OmUrlState {
+	omUrl: string;
+	dark: boolean;
+	partial: boolean;
+	tileSize: number;
+	interval: number;
+	domain: Domain;
+	variable: Variable;
+	mapBounds: number[];
+	ranges: DimensionRange[] | null;
+
+	data: Data | null;
+	dataPromise: Promise<Data> | null;
+	lastAccess: number;
+}
+
+export interface OmParseUrlCallbackResult {
+	variable: Variable;
+	ranges: DimensionRange[] | null;
+	omUrl: string;
+	dark: boolean;
+	partial: boolean;
+	interval: number;
+	domain: Domain;
+	mapBounds: number[];
+}
+
+export interface VectorOptions {
+	grid: boolean;
+	arrows: boolean;
+	contours: boolean;
+}
+
+export interface OmProtocolSettings {
+	tileSize: number;
+	useSAB: boolean;
+	colorScales: ColorScales;
+	domainOptions: Domain[];
+	variableOptions: Variable[];
+	resolutionFactor: 0.5 | 1 | 2;
+	parseUrlCallback: (
+		url: string,
+		domainOptions: Domain[],
+		variableOptions: Variable[]
+	) => OmParseUrlCallbackResult;
+	postReadCallback:
+		| ((omFileReader: OMapsFileReader, omUrl: string, data: Data) => void)
+		| undefined;
+	vectorOptions: VectorOptions;
+}
+
+export interface Data {
+	values: Float32Array | undefined;
+	directions: Float32Array | undefined;
+}
+
 export type TileJSON = {
 	tilejson: '2.2.0';
 	tiles: Array<string>;

src/worker-pool.ts

@@ -2,7 +2,7 @@ import type { Data } from './om-protocol';
 // @ts-expect-error worker import
 import TileWorker from './worker?worker&inline';
 
-import type { ColorScale, DimensionRange, Domain, Variable } from './types';
+import type { ColorScale, DimensionRange, Domain, Variable, VectorOptions } from './types';
 
 export interface TileRequest {
 	type: 'getArrayBuffer' | 'getImage';
@@ -20,6 +20,7 @@ export interface TileRequest {
 	variable: Variable;
 	colorScale: ColorScale;
 	mapBounds: number[];
+	vectorOptions: VectorOptions;
 }
 
 export type TileResponse = ImageBitmap | ArrayBuffer;

src/worker.ts

@@ -93,23 +93,24 @@ self.onmessage = async (message: MessageEvent<TileRequest>): Promise<void> => {
 		const interval = message.data.interval;
 		const directions = message.data.data.directions;
 		const colorScale = message.data.colorScale;
+		const vectorOptions = message.data.vectorOptions;
 
 		if (!values) {
 			throw new Error('No values provided');
 		}
 
 		const pbf = new Pbf();
 
-		if (key.includes('grid=true')) {
+		if (vectorOptions.grid) {
 			if (domain.grid.type !== 'regular') {
 				throw new Error('Only regular grid types supported');
 			}
 			generateGridPoints(pbf, values, directions, domain.grid, x, y, z);
 		}
-		if (key.includes('arrows=true') && directions) {
+		if (vectorOptions.arrows && directions) {
 			generateArrows(pbf, values, directions, domain, ranges, x, y, z, colorScale);
 		}
-		if (key.includes('contours=true')) {
+		if (vectorOptions.contours) {
 			const grid = GridFactory.create(domain.grid, ranges);
 			generateContours(pbf, values, grid, x, y, z, interval ? interval : 2);
 		}