Anchor Faktiska symbols to temperature badges

web/src/components/map/MapView.tsx

@@ -53,6 +53,7 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
                 getWindData(),
                 [getTitle(), getSource()],
                 props,
+                productionTemplate,
             );
         };
         img.src = props.map;
@@ -76,6 +77,7 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
             getWindData(),
             [getTitle(), getSource()],
             props,
+            productionTemplate,
         );
     });
 

web/src/components/map/canvasDraw.ts

@@ -1,5 +1,6 @@
 import { ResolutionPropsValue, WindProps, windProps } from "./mapConsts";
 import { drawRotatedImage, getAngleFromString } from "./windAngles";
+import { faktiskaMarkerLayout, FaktiskaStation } from "../../pages/map-graphics/faktiskaConfig";
 
 // cityName, {x, y}, weatherValue, icon
 export type CityData = [cityName: string, {x: number, y: number }, weatherValue: number, icon: string | undefined]
@@ -11,6 +12,7 @@ export function drawOnMap(
     windData: [string, string, string, boolean, WindProps],
     overlayData: [string, string],
     props: ResolutionPropsValue,
+    productionTemplate = false,
 ): void {
     const [windDirection, windSpeed, windGusts, roundValues, windProp] = windData;
     const [bgImg, arrowImg] = imgArr;
@@ -27,13 +29,13 @@ export function drawOnMap(
         const stringValue = numericValue.toString().replace(".", ",");
 
         ctx.font = `bold ${props.fontSize}px Rubik`;
-        const badgeWidth = Math.max(props.boxSize, Math.ceil(ctx.measureText(stringValue).width + props.fontSize * 0.8));
+        const badgeWidth = getBadgeWidth(ctx, stringValue, props);
         ctx.fillStyle = "#FFFFFF";
         ctx.fillRect(localX - badgeWidth / 2, localY - props.boxSize / 2, badgeWidth, props.boxSize);
     });
 
     // weather values
-    cityData.forEach(([, {x, y}, value, icon]) => {
+    cityData.forEach(([city, {x, y}, value, icon]) => {
         const localX = props.offsetX + x * props.scale;
         const localY = props.offsetY + y * props.scale;
 
@@ -47,9 +49,24 @@ export function drawOnMap(
 
         if (icon) {
             ctx.fillStyle = "#FFFFFF";
-            ctx.font = `normal ${props.fontSize * 5}px Daira by LTV grafika`;
-            const iconSize = ctx.measureText(icon);
-            drawOpticallyCenteredGlyph(ctx, icon, localX + props.boxSize/2 + 10 + iconSize.width/2, localY);
+            ctx.font = `normal ${props.fontSize * (productionTemplate ? 4.2 : 5)}px Daira by LTV grafika`;
+            const iconMetrics = ctx.measureText(icon);
+            const glyphWidth = iconMetrics.actualBoundingBoxLeft + iconMetrics.actualBoundingBoxRight;
+            const badgeWidth = getBadgeWidth(ctx, stringValue, props, true);
+
+            if (productionTemplate) {
+                const layout = faktiskaMarkerLayout[city as FaktiskaStation];
+                const side = layout?.iconSide ?? "right";
+                const gap = layout?.iconGap ?? 22;
+                const offsetX = layout?.iconOffsetX ?? 0;
+                const offsetY = layout?.iconOffsetY ?? 0;
+                const iconCenterX = side === "right"
+                    ? localX + badgeWidth / 2 + gap + glyphWidth / 2 + offsetX
+                    : localX - badgeWidth / 2 - gap - glyphWidth / 2 + offsetX;
+                drawOpticallyCenteredGlyph(ctx, icon, iconCenterX, localY + offsetY);
+            } else {
+                drawOpticallyCenteredGlyph(ctx, icon, localX + props.boxSize / 2 + 10 + iconMetrics.width / 2, localY);
+            }
         }
     });
 
@@ -81,6 +98,13 @@ export function drawOnMap(
     ctx.fillText("M/S", windProp.offsetX + boxMiddleX + gustsWidth / 2 - 22, (windProp.offsetY + 805)*windProp.scaleY);
 }
 
+function getBadgeWidth(ctx: CanvasRenderingContext2D, value: string, props: ResolutionPropsValue, restoreValueFont = false): number {
+    if (restoreValueFont) ctx.font = `bold ${props.fontSize}px Rubik`;
+    const width = Math.max(props.boxSize, Math.ceil(ctx.measureText(value).width + props.fontSize * 0.8));
+    if (restoreValueFont) ctx.font = `normal ${props.fontSize * 4.2}px Daira by LTV grafika`;
+    return width;
+}
+
 function drawOpticallyCenteredGlyph(ctx: CanvasRenderingContext2D, glyph: string, centerX: number, centerY: number): void {
     const metrics = ctx.measureText(glyph);
     ctx.textAlign = "left";