Refine broadcast map labels and overlays

web/src/components/map/MapView.tsx

@@ -15,6 +15,8 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
     const [getImg, setImg] = createSignal(new Image());
     const weatherIconsSingal = createSignal<{[key: string]: string;}>({});
     const [getWeatherIcons] = weatherIconsSingal;
+    const [getTitle, setTitle] = createSignal("");
+    const [getSource, setSource] = createSignal("");
     
     let lastCoords: CityData[] = [];
     const props = resolutionProps[type];
@@ -49,6 +51,7 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
                 [img, arrowImg],
                 lastCoords,
                 getWindData(),
+                [getTitle(), getSource()],
                 props,
             );
         };
@@ -71,6 +74,7 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
             [getImg(), arrowImg],
             coordsAndData,
             getWindData(),
+            [getTitle(), getSource()],
             props,
         );
     });
@@ -89,6 +93,10 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
             <details class="broadcastControls">
                 <summary><span><strong>Broadcast overlay controls</strong><small>Optional manual wind and weather-symbol overrides</small></span></summary>
                 <p class="controlHelp">These settings do not change the queried city values. Use them only when preparing a finished broadcast graphic.</p>
+            <div class="overlayFields">
+                <label><span>Title</span><input type="text" placeholder="19. APRĪĻA GAISA TEMPERATŪRAS REKORDI" value={getTitle()} onInput={e => setTitle(e.target.value)} /></label>
+                <label><span>Source</span><input type="text" placeholder="LVĢMC" value={getSource()} onInput={e => setSource(e.target.value)} /></label>
+            </div>
             <div class="grid-1-2">
                 <div>
                     <div>

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);
+    }
+}