Use approved production map and branding assets

web/src/pages/map-graphics/MapGraphics.tsx

@@ -3,6 +3,7 @@ import { MapView } from "../../components/map/MapView";
 import { apiHost, ResultKeyVal } from "../../consts";
 import { LoadingSpinner } from "../../components/spinner/LoadingSpinner";
 import { faktiskaExport, faktiskaStations, FaktiskaStation } from "./faktiskaConfig";
+import type { FaktiskaTemplate } from "./faktiskaTemplates";
 import "./mapGraphics.css";
 
 type LatestTemperature = { city: FaktiskaStation; observedAt: string; value: number | null };
@@ -13,6 +14,10 @@ const emptyValues = (): Record<FaktiskaStation, string> =>
 export function Faktiska() {
     const [values, setValues] = createSignal(emptyValues());
     const [overrides, setOverrides] = createSignal<Set<FaktiskaStation>>(new Set());
+    const [template, setTemplate] = createSignal<FaktiskaTemplate>(faktiskaExport.defaultTemplate);
+    const productionSize = () => template() === "faktiska_1920x1080"
+        ? { width: 1920, height: 1080 }
+        : { width: 3840, height: 1440 };
 
     const fetchLatest = async (): Promise<LatestTemperature[]> => {
         const response = await fetch(`${apiHost}/api/query/latest-temperatures/${faktiskaStations.join(",")}`);
@@ -63,7 +68,7 @@ export function Faktiska() {
     return <div class="mapGraphicsPage pageWorkspace faktiskaWorkspace">
         <div class="pageHeading">
             <div><span class="eyebrow">Daily newsroom production</span><h1>Faktiskā</h1><p>Current temperatures with manually prepared weather symbols and wind.</p></div>
-            <div class="productionSize">{faktiskaExport.width} × {faktiskaExport.height} PNG</div>
+            <div class="productionSize">{productionSize().width} × {productionSize().height} PNG</div>
         </div>
 
         <section class="faktiskaDataBand">
@@ -87,7 +92,13 @@ export function Faktiska() {
 
         <section class="mapProduction faktiskaProduction">
             <h2>2. Add weather symbols and wind, then export</h2>
-            <MapView type={faktiskaExport.mapType} data={cityData} mode="faktiska" productionTemplate/>
+            <div class="resolutionChoices faktiskaResolutionChoices" aria-label="Faktiskā export size">
+                <button classList={{ active: template() === "faktiska_1920x1080" }} onClick={() => setTemplate("faktiska_1920x1080")}>1920 × 1080</button>
+                <button classList={{ active: template() === "faktiska_3840x1440" }} onClick={() => setTemplate("faktiska_3840x1440")}>3840 × 1440</button>
+            </div>
+            <Show when={template()} keyed>{currentTemplate =>
+                <MapView type={currentTemplate} data={cityData} mode="faktiska" productionTemplate/>
+            }</Show>
         </section>
     </div>;
 }

web/src/pages/map-graphics/faktiskaConfig.ts

@@ -38,7 +38,5 @@ export const faktiskaMarkerLayout: Record<FaktiskaStation, FaktiskaMarkerLayout>
 };
 
 export const faktiskaExport = {
-    width: 3840,
-    height: 1440,
-    mapType: "map_3840x1440_wind" as const,
+    defaultTemplate: "faktiska_3840x1440" as const,
 };

web/src/pages/map-graphics/faktiskaTemplates.ts

@@ -0,0 +1,79 @@
+import faktiska1920 from '../../assets/production/FAKTISKA_map_base_1920.png';
+import faktiska3840 from '../../assets/production/FAKTISKA_map_base_3840.png';
+
+import type { FaktiskaStation } from './faktiskaConfig';
+
+export type FaktiskaTemplate = 'faktiska_1920x1080' | 'faktiska_3840x1440';
+
+type TemplateDefinition = {
+    width: number;
+    height: number;
+    map: string;
+    fontSize: number;
+    badgeSize: number;
+    iconSize: number;
+    iconGap: number;
+    markers: Record<FaktiskaStation, { x: number; y: number }>;
+    wind: {
+        x: number;
+        directionY: number;
+        speedY: number;
+        gustsY: number;
+        fontSize: number;
+        unitFontSize: number;
+        arrowSize: number;
+    };
+};
+
+export const faktiskaTemplates: Record<FaktiskaTemplate, TemplateDefinition> = {
+    faktiska_1920x1080: {
+        width: 1920,
+        height: 1080,
+        map: faktiska1920,
+        fontSize: 46,
+        badgeSize: 84,
+        iconSize: 112,
+        iconGap: 10,
+        markers: {
+            'Liepāja': { x: 167, y: 680 },
+            'Ventspils': { x: 253, y: 370 },
+            'Stende': { x: 444, y: 453 },
+            'Saldus': { x: 426, y: 623 },
+            'Rīga': { x: 732, y: 459 },
+            'Jelgava': { x: 763, y: 650 },
+            'Ainaži': { x: 728, y: 187 },
+            'Valmiera': { x: 874, y: 283 },
+            'Madona': { x: 1047, y: 474 },
+            'Alūksne': { x: 1218, y: 335 },
+            'Zīlāni': { x: 1027, y: 623 },
+            'Daugavpils': { x: 1183, y: 781 },
+            'Rēzekne': { x: 1272, y: 585 },
+        },
+        wind: { x: 1663, directionY: 386, speedY: 600, gustsY: 810, fontSize: 45, unitFontSize: 18, arrowSize: 44 },
+    },
+    faktiska_3840x1440: {
+        width: 3840,
+        height: 1440,
+        map: faktiska3840,
+        fontSize: 72,
+        badgeSize: 134,
+        iconSize: 190,
+        iconGap: 14,
+        markers: {
+            'Liepāja': { x: 952, y: 1026 },
+            'Ventspils': { x: 1086, y: 540 },
+            'Stende': { x: 1388, y: 671 },
+            'Saldus': { x: 1359, y: 905 },
+            'Rīga': { x: 1838, y: 681 },
+            'Jelgava': { x: 1888, y: 979 },
+            'Ainaži': { x: 1833, y: 253 },
+            'Valmiera': { x: 2061, y: 404 },
+            'Madona': { x: 2333, y: 703 },
+            'Alūksne': { x: 2603, y: 486 },
+            'Zīlāni': { x: 2301, y: 937 },
+            'Daugavpils': { x: 2548, y: 1185 },
+            'Rēzekne': { x: 2686, y: 878 },
+        },
+        wind: { x: 3258, directionY: 570, speedY: 830, gustsY: 1090, fontSize: 64, unitFontSize: 25, arrowSize: 64 },
+    },
+};

web/src/pages/map-graphics/mapGraphics.css

@@ -52,6 +52,7 @@
 .resetTemperature{grid-area:reset;align-self:start;min-height:0;padding:3px 5px;background:transparent;color:var(--accent-strong);font-family:Inter,sans-serif;font-size:10px}
 .inlineNotice{margin:10px 0;padding:10px 12px;border-radius:9px;background:rgba(255,255,255,.62)}.inlineNotice.error{color:var(--danger)}
 .faktiskaProduction{margin-top:20px}.faktiskaProduction>h2{font-size:22px}
+.faktiskaResolutionChoices{display:flex;gap:8px;margin:0 0 14px}.faktiskaResolutionChoices button{min-width:150px}.faktiskaResolutionChoices button.active{border-color:var(--accent);background:var(--accent-pale);color:var(--accent-strong)}
 @media(max-width:1450px){.temperatureEditor{grid-template-columns:repeat(5,minmax(150px,1fr))}}
 @media(max-width:1050px){.temperatureEditor{grid-template-columns:repeat(3,minmax(150px,1fr))}}
 @media(max-width:650px){.faktiskaStatus{align-items:flex-start;flex-direction:column}.temperatureEditor{grid-template-columns:1fr 1fr}}