Replace Daira glyphs with normalized weather icons

web/src/components/map/MapView.tsx

@@ -8,12 +8,14 @@ import { cityCoords } from "../cityCoords";
 import { MapResolution, resolutionProps, windProps, WindProps } from "./mapConsts";
 import { CityData, drawOnMap } from "./canvasDraw";
 import { IconInputs } from "../weatherIcons/IconInputs";
+import { preloadWeatherIcons } from "../weatherIcons/weatherIconAssets";
 import { download } from '../../helpers/download'
 
 export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[], mode?: "temperature" | "faktiska", productionTemplate?: boolean }> = ({ type, data, mode = "temperature", productionTemplate = false }) => {
     const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>();
     const [getImg, setImg] = createSignal(new Image());
     const [fontReady, setFontReady] = createSignal(false);
+    const [iconsReady, setIconsReady] = createSignal(mode !== "faktiska");
     const weatherIconsSignal = createSignal<{[key: string]: string;}>({});
     const [getWeatherIcons] = weatherIconsSignal;
     const [getTitle, setTitle] = createSignal("");
@@ -44,6 +46,7 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
 
     onMount(() => {
         void document.fonts.load(`700 ${props.fontSize}px Monda`).then(() => setFontReady(true));
+        if (mode === "faktiska") void preloadWeatherIcons().then(() => setIconsReady(true));
         const ctx = getCanvas()!.getContext("2d")!;
         const img = new Image();
         img.onload = () => {
@@ -63,6 +66,7 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
 
     createEffect(() => {
         fontReady();
+        iconsReady();
         const ctx = getCanvas()!.getContext("2d")!;
         const weatherIcons = getWeatherIcons();
         const coordsAndData: CityData[] = data()