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