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
+    // City value badges use a consistent height and expand horizontally to fit the value.
-    ctx.fillStyle = "#FFFFFF";
+    cityData.forEach(([, {x, y}, value]) => {
-    cityData.forEach(([, {x, y}]) => {
         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.fillRect(localX - badgeWidth / 2, localY - props.boxSize / 2, badgeWidth, props.boxSize);
-        ctx.fill();
     });
-    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);
+    }
+}

web/src/css/aggregator.css

@@ -12,4 +12,5 @@
 .timeRangeTitle div {
     font-size: 11px;
 }
+.overlayFields{display:grid;grid-template-columns:minmax(260px,2fr) minmax(160px,1fr);gap:12px;padding:16px 16px 0}.overlayFields label,.overlayFields span{display:block}.overlayFields span{margin-bottom:6px;font-size:12px;font-weight:700}.overlayFields input{width:100%}
 .pageWorkspace{max-width:1800px;margin:auto;padding:34px 28px 70px}.pageHeading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.pageHeading h1{margin:5px 0 6px;font-size:34px}.pageHeading p{margin:0;color:var(--text-muted)}.selectionCount{padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-weight:700}.aggregator>.container{display:grid;grid-template-columns:240px 300px minmax(0,1fr);gap:18px;align-items:start}.panel{padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}.panel h2{margin:0 0 18px;font-size:16px}.cityPanel{max-height:calc(100vh - 160px);overflow:auto}.cityPanel ul{margin:12px 0;padding:0;columns:1}.cityPanel li{padding:3px 0}.queryPanel h4{margin:22px 0 9px}.queryPanel p{margin:10px 0}.resultsPanel{min-width:0}.emptyState{display:flex;min-height:260px;align-items:center;justify-content:center;flex-direction:column;gap:8px;margin-top:18px;padding:30px;border:1px dashed #bac6d4;border-radius:16px;background:rgba(255,255,255,.55);color:var(--text-muted);text-align:center}.emptyState strong{color:var(--text);font-size:18px}.mapWorkspace{margin-top:14px}.mapToolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.mapToolbar strong,.mapToolbar span{display:block}.mapToolbar span{margin-top:3px;color:var(--text-muted);font-size:12px}.broadcastControls{margin-bottom:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.broadcastControls summary{padding:14px 16px;cursor:pointer}.broadcastControls summary span,.broadcastControls summary strong,.broadcastControls summary small{display:block}.broadcastControls summary small,.controlHelp,.fieldHint{color:var(--text-muted);font-size:12px}.broadcastControls[open] summary{border-bottom:1px solid var(--border)}.broadcastControls .grid-1-2{padding:16px}.controlHelp{margin:16px 16px 0}.canvasFrame{overflow:hidden;border:1px solid var(--border);border-radius:14px;background:#d8dee6;box-shadow:var(--shadow-sm)}.canvasFrame canvas{display:block}.weatherIconButton{border-radius:7px}.fieldHint{margin:4px 0 10px}@media(max-width:1200px){.aggregator>.container{grid-template-columns:220px 1fr}.resultsPanel{grid-column:1/-1}.cityPanel{max-height:none}}@media(max-width:700px){.pageWorkspace{padding:24px 14px}.pageHeading{align-items:start;flex-direction:column}.aggregator>.container{grid-template-columns:1fr}.resultsPanel{grid-column:auto}}

web/src/pages/cities/result/ResultView.tsx

@@ -9,7 +9,7 @@ import { GridResult } from "./GridResult";
 
 type ResultView = "grid" | "list" | "map_1920x1080" | "map_1920x1080_wind" | "map_3840x1440" | "map_3840x1440_wind";
 const resultViews: Array<ResultView> = ["grid", "list", "map_1920x1080", "map_1920x1080_wind", "map_3840x1440", "map_3840x1440_wind"];
-const viewLabels: Record<ResultView,string> = {grid:'Cards',list:'List',map_1920x1080:'HD map',map_1920x1080_wind:'HD map + wind',map_3840x1440:'Ultrawide map',map_3840x1440_wind:'Ultrawide + wind'}
+const viewLabels: Record<ResultView,string> = {grid:'grid',list:'list',map_1920x1080:'map_1920x1080',map_1920x1080_wind:'map_1920x1080_wind',map_3840x1440:'map_3840x1440',map_3840x1440_wind:'map_3840x1440_wind'}
 
 export const ResultView: Component<{
     result: Resource<QueryResult>