use a 2x for the tiles

Author: Vincent van der Wal

.env

@@ -1,5 +1,5 @@
 VITE_DOMAIN=dwd_icon_d2
 VITE_VARIABLE=temperature_2m
-VITE_TILE_SIZE=512
+VITE_TILE_SIZE=256
 VITE_TILE_OPACITY=70
 VITE_BUILD=package

src/main.ts

@@ -26,8 +26,6 @@ if (params.get('domain')) {
 
 const TILE_SIZE = Number(import.meta.env.VITE_TILE_SIZE);
 
-console.log(TILE_SIZE);
-
 let map: maplibregl.Map;
 const infoBox: HTMLElement | null = document.getElementById('info_box');
 const mapContainer: HTMLElement | null = document.getElementById('map_container');
@@ -96,10 +94,13 @@ const changeOMfileURL = () => {
 	variableSelector.disabled = true;
 	dateTimeSelector.disabled = true;
 
+	console.log(import.meta.env.DEV);
+
 	source = map.addSource('omFileSource', {
 		type: 'raster',
 		url: 'om://' + omUrl,
-		tileSize: TILE_SIZE
+		tileSize: TILE_SIZE,
+		volatile: import.meta.env.DEV
 	});
 
 	map.addLayer(
@@ -140,7 +141,8 @@ if (mapContainer) {
 		source = map.addSource('omFileSource', {
 			type: 'raster',
 			url: 'om://' + omUrl,
-			tileSize: TILE_SIZE
+			tileSize: TILE_SIZE,
+			volatile: import.meta.env.DEV
 		});
 
 		map.addLayer(

src/om-protocol.ts

@@ -60,7 +60,7 @@ interface Data {
 
 let data: Data;
 
-const TILE_SIZE = Number(import.meta.env.VITE_TILE_SIZE);
+const TILE_SIZE = Number(import.meta.env.VITE_TILE_SIZE) * 2;
 
 export const getValueFromLatLong = (lat: number, lon: number, omUrl: string) => {
 	if (data) {
@@ -125,6 +125,7 @@ const getTile = async ({ z, x, y }: TileIndex, omUrl: string): Promise<ImageBitm
 };
 
 const renderTile = async (url: string) => {
+	console.log(url);
 	// Read URL parameters
 	const re = new RegExp(/om:\/\/(.+)\/(\d+)\/(\d+)\/(\d+)/);
 	const result = url.match(re);

src/worker.ts

@@ -16,7 +16,7 @@ import {
 import type { TypedArray } from '@openmeteo/file-reader';
 import type { Domain } from './types';
 
-const TILE_SIZE = Number(import.meta.env.VITE_TILE_SIZE);
+const TILE_SIZE = Number(import.meta.env.VITE_TILE_SIZE) * 2;
 const OPACITY = Number(import.meta.env.VITE_TILE_OPACITY);
 
 const rotatePoint = (cx: number, cy: number, theta: number, x: number, y: number) => {