Refine broadcast map labels and overlays

web/src/components/map/canvasDraw.ts

@@ -9,26 +9,28 @@ export function drawOnMap(
     imgArr: [HTMLImageElement, HTMLImageElement],
     cityData: CityData[],
     windData: [string, string, string, boolean, WindProps],
+    overlayData: [string, string],
     props: ResolutionPropsValue,
 ): void {
     const [windDirection, windSpeed, windGusts, roundValues, windProp] = windData;
     const [bgImg, arrowImg] = imgArr;
+    const [title, source] = overlayData;
 
     // bg
     ctx.drawImage(bgImg, 0, 0);
 
-    // city boxes
-    ctx.fillStyle = "#FFFFFF";
-    cityData.forEach(([, {x, y}]) => {
+    // City value badges use a consistent height and expand horizontally to fit the value.
+    cityData.forEach(([, {x, y}, value]) => {
         const localX = props.offsetX + x * props.scale;
         const localY = props.offsetY + y * props.scale;
+        const numericValue = roundValues ? Math.round(value) : value.toFixed(1);
+        const stringValue = numericValue.toString().replace(".", ",");
 
-        ctx.beginPath();
+        ctx.font = `bold ${props.fontSize}px Rubik`;
+        const badgeWidth = Math.max(props.boxSize, Math.ceil(ctx.measureText(stringValue).width + props.fontSize * 0.8));
         ctx.fillStyle = "#FFFFFF";
-        ctx.rect(localX-props.boxSize/2, localY-props.boxSize/2, props.boxSize, props.boxSize);
-        ctx.fill();
+        ctx.fillRect(localX - badgeWidth / 2, localY - props.boxSize / 2, badgeWidth, props.boxSize);
     });
-    ctx.fill();
 
     // weather values
     cityData.forEach(([, {x, y}, value, icon]) => {
@@ -51,6 +53,8 @@ export function drawOnMap(
         }
     });
 
+    drawTitleOverlay(ctx, title, source, props.width);
+
     if (!props.showWind) return;
 
     // wind values
@@ -76,3 +80,37 @@ export function drawOnMap(
     ctx.font = "bold 25px Rubik";
     ctx.fillText("M/S", windProp.offsetX + boxMiddleX + gustsWidth / 2 - 22, (windProp.offsetY + 805)*windProp.scaleY);
 }
+
+function drawTitleOverlay(ctx: CanvasRenderingContext2D, title: string, source: string, canvasWidth: number): void {
+    if (!title.trim() && !source.trim()) return;
+
+    const scale = canvasWidth / 1920;
+    const right = 34 * scale;
+    const top = 38 * scale;
+    const horizontalPadding = 24 * scale;
+    const titleHeight = 62 * scale;
+    const sourceHeight = 38 * scale;
+
+    ctx.textAlign = "left";
+    ctx.textBaseline = "middle";
+    ctx.font = `bold ${30 * scale}px Rubik`;
+    const titleText = title.trim().toUpperCase();
+    const titleWidth = Math.max(360 * scale, ctx.measureText(titleText).width + horizontalPadding * 2);
+    const titleX = canvasWidth - right - titleWidth;
+
+    ctx.fillStyle = "#9b0008";
+    ctx.fillRect(titleX, top, titleWidth, titleHeight);
+    ctx.fillStyle = "#FFFFFF";
+    ctx.fillText(titleText, titleX + horizontalPadding, top + titleHeight / 2);
+
+    if (source.trim()) {
+        ctx.font = `bold ${19 * scale}px Rubik`;
+        const sourceText = source.trim().toUpperCase();
+        const sourceWidth = Math.max(130 * scale, ctx.measureText(sourceText).width + horizontalPadding * 2);
+        const sourceX = canvasWidth - right - sourceWidth;
+        ctx.fillStyle = "#FFFFFF";
+        ctx.fillRect(sourceX, top + titleHeight, sourceWidth, sourceHeight);
+        ctx.fillStyle = "#000000";
+        ctx.fillText(sourceText, sourceX + horizontalPadding, top + titleHeight + sourceHeight / 2);
+    }
+}