These settings do not change the queried city values. Use them only when preparing a finished broadcast graphic.
-
+
-
+
+ {mode === "faktiska" &&
city)} weatherIconsSignal={weatherIconsSignal} />}
diff --git a/web/src/components/weatherIcons/IconInputs.tsx b/web/src/components/weatherIcons/IconInputs.tsx
index 97c362f..e364e81 100644
--- a/web/src/components/weatherIcons/IconInputs.tsx
+++ b/web/src/components/weatherIcons/IconInputs.tsx
@@ -1,48 +1,17 @@
-import { Component, Signal } from "solid-js";
-import { weatherIconCities, weatherIcons } from "./iconConsts";
-
+import { Component, createSignal, For, Show, Signal } from "solid-js";
+import { weatherIcons } from "./iconConsts";
import "../../css/weatherIcons.css";
-export const IconInputs: Component<{ weatherIconsSingal: Signal<{[key: string]: string;}>; }> = ({
- weatherIconsSingal: [getWeatherIcons, setWeatherIcons]
-}) => {
+export const IconInputs: Component<{cities: string[]; weatherIconsSignal: Signal
>}> = (props) => {
+ const [icons, setIcons] = props.weatherIconsSignal;
+ const [selected, setSelected] = createSignal(weatherIcons[0]);
+ const assign = (city: string) => setIcons({...icons(), [city]: selected()});
+ const clear = (city: string) => { const next = {...icons()}; delete next[city]; setIcons(next); };
+ const applyAll = () => setIcons(Object.fromEntries(props.cities.map(city => [city, selected()])));
- function onIconChange(city: string, icon: string) {
- const weatherIcons = { ...getWeatherIcons() };
- weatherIcons[city] = icon;
- if (icon === "") delete weatherIcons[city];
-
- setWeatherIcons(weatherIcons);
- }
-
- return (
- <>
-
-
Weather symbolsClick a symbol to copy it, then paste it into a city field below.
- { weatherIcons.map(icon =>
-
copyToClipboard(icon)}>{ icon })
- }
-
- { weatherIconCities.map(city =>
-
- {city}:
-
- onIconChange(city, e.target.value)}
- />
-
-
)
- }
-
Weather symbolsSelect a font symbol, apply it to all cities, then change the exceptions.
{icon => }
+ {city => {city}
}
+ ;
+};
diff --git a/web/src/css/aggregator.css b/web/src/css/aggregator.css
index 2628537..b9504ef 100644
--- a/web/src/css/aggregator.css
+++ b/web/src/css/aggregator.css
@@ -13,4 +13,5 @@
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%}
+.mapControlSections{display:grid;gap:18px;padding:16px}.valueControls{padding-bottom:16px;border-bottom:1px solid var(--border)}
.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}}
diff --git a/web/src/css/weatherIcons.css b/web/src/css/weatherIcons.css
index e791efe..a9ac486 100644
--- a/web/src/css/weatherIcons.css
+++ b/web/src/css/weatherIcons.css
@@ -22,4 +22,5 @@
font-family: 'Daira by LTV grafika';
font-size: 20px;
color: white;
-}
\ No newline at end of file
+}
+.weatherIconButton.selected{background:var(--accent);color:#fff;box-shadow:0 0 0 2px var(--accent-pale)}
diff --git a/web/src/pages/cities/Cities.tsx b/web/src/pages/cities/Cities.tsx
index 6cc4c40..8ab0ecf 100644
--- a/web/src/pages/cities/Cities.tsx
+++ b/web/src/pages/cities/Cities.tsx
@@ -22,7 +22,7 @@ export function Cities() {
return (
-
Historical observationsCity analysis
Choose stations and a calculation, then compare results or prepare a map graphic.
{getCities().size} cities selected
+
Historical observationsCity analysis
Choose stations and a calculation, then compare the resulting values.
{getCities().size} cities selected
-
-
-
-
-
-
-
-
-
-
-
-
);
diff --git a/web/src/pages/home/Home.tsx b/web/src/pages/home/Home.tsx
index ee84fcf..d0e4be0 100644
--- a/web/src/pages/home/Home.tsx
+++ b/web/src/pages/home/Home.tsx
@@ -4,6 +4,7 @@ import './home.css'
const tools = [
['/station','Monitor','Stations','Inspect recent measurements on a map and open detailed station charts.','◉'],
['/cities','Analyse & export','City analysis','Compare cities, aggregate values, and prepare map graphics.','▦'],
+ ['/map-graphics','Produce','Map graphics','Build temperature and Faktiskā newsroom graphics with export-ready overlays.','▣'],
['/latvia','Summarise','Latvia overview','Review country-wide minimum, maximum, average, and total values.','⌁'],
['/database','Browse','Data archive','Find available dates and inspect individual hourly records.','▤'],
['/harmonie','Forecast model','HARMONIE','Render forecast fields from locally stored HARMONIE GRIB files.','◫'],
diff --git a/web/src/pages/map-graphics/MapGraphics.tsx b/web/src/pages/map-graphics/MapGraphics.tsx
new file mode 100644
index 0000000..34c14bb
--- /dev/null
+++ b/web/src/pages/map-graphics/MapGraphics.tsx
@@ -0,0 +1,54 @@
+import moment from "moment";
+import { createResource, createSignal, Show } from "solid-js";
+import { SelectCity } from "../../components/SelectCity";
+import { SelectTimeRange } from "../../components/SelectTimeRange";
+import { MapView } from "../../components/map/MapView";
+import { MapResolution } from "../../components/map/mapConsts";
+import { FETCH_DELAY_MS, apiHost, ResultKeyVal } from "../../consts";
+import { isQueryResult, QueryResult } from "../cities/helpers";
+import { LoadingSpinner } from "../../components/spinner/LoadingSpinner";
+import "./mapGraphics.css";
+
+export function MapGraphics() {
+ const now = new Date(new Date().setMinutes(30));
+ const [cities, setCities] = createSignal
>(new Set());
+ const [start, setStart] = createSignal(moment(now).subtract(1, "day").toDate());
+ const [end, setEnd] = createSignal(now);
+ const [field, setField] = createSignal("tempMax");
+ const [key, setKey] = createSignal("max");
+ const [mode, setMode] = createSignal<"temperature" | "faktiska">("faktiska");
+ const [resolution, setResolution] = createSignal<"1920x1080" | "3840x1440">("1920x1080");
+ const [wind, setWind] = createSignal(false);
+ const [trigger, setTrigger] = createSignal(0);
+
+ const fetchData = async () => {
+ if (!cities().size) return undefined;
+ await new Promise(resolve => setTimeout(resolve, FETCH_DELAY_MS));
+ const cityPath = [...cities()].join(",");
+ const range = `${moment(start()).format("YYYYMMDD_HHmm")}-${moment(end()).format("YYYYMMDD_HHmm")}`;
+ const response = await fetch(`${apiHost}/api/query/city/${cityPath}/${range}/hour/${field()}/${key()}`);
+ if (!response.ok) throw new Error(`Query failed (${response.status})`);
+ return response.json();
+ };
+ const [result] = createResource(trigger, fetchData);
+ const mapType = (): MapResolution => `map_${resolution()}${wind() ? "_wind" : ""}` as MapResolution;
+ const cityData = (): ResultKeyVal[] => Object.entries((result() as QueryResult).result).map(([city, value]) => [city, typeof value === "number" ? value : -99]);
+
+ return
+
Newsroom productionMap graphics
Create a temperature map or Faktiskā weather map and export the finished PNG.
{cities().size} cities selected
+
+
+
+ 2. Choose graphic
+
Graphic type
+
+
3. Retrieve temperatures
Could not load map data{result.error.message}
+
+ Choose cities and load dataThe production controls and map preview will appear here.
+
+
+