From e164d9a0d35f5bd97e99889a154dc2e85599872b Mon Sep 17 00:00:00 2001 From: Antti Rumpunen Date: Wed, 8 May 2024 14:54:07 +0300 Subject: [PATCH] Tuning WMS-layer infopanels --- i18n/en.json | 36 +++- i18n/fi.json | 38 ++++- i18n/sv.json | 36 +++- src/components/map/sheets/InfoBottomSheet.tsx | 160 ++++++++++++++++-- src/config/types.ts | 12 +- 5 files changed, 241 insertions(+), 41 deletions(-) diff --git a/i18n/en.json b/i18n/en.json index e1f29284..9cfbb7ca 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -363,20 +363,34 @@ "precipitation": { "title": "Precipitation", "rainRadarInfo": "The intensity of the observed and forecasted precipitation is expressed in colors.", - "precipitationObs": "Observed rainfall on the map has been measured using a weather radar.", - "precipitationFcst": "Precipitation forecast is a short-term rain forecast based on radar images and weather forecasting models.", - "precipitationFinAndScandinavia": "Layer with 15 minutes timesteps cover Finland and layer with one hour timesteps cover Scandinavia.", "light": "light", "moderate": "moderate", - "strong": "heavy" + "strong": "heavy", + "precipitationFin": { + "description": "Finnish radar combination with a 15-minute time step.", + "observation": "The precipitation observation presented on the map has been measured with weather radars in Finland.", + "forecast": "The predicted precipitation is a short-term rainfall forecast based on radar images and weather forecast models." + }, + "precipitationScan": { + "description": "Scandinavian radar combination with a 1-hour time step.", + "observation": "The precipitation observation presented on the map has been measured with weather radars in Scandinavia.", + "forecast": "The predicted precipitation is a short-term rainfall forecast based on weather forecast models." + } }, - "lightnings": { + "lightnings15": { "title": "Lightnings", "description": "Lightning layer shows observed lightning strikes in the area. Visualization is based on lightning age.", "age1": "0-5 minutes old lightning", "age2": "5-10 minutes old lightning", "age3": "10-15 minutes old lightning" }, + "lightnings60": { + "title": "Lightnings", + "description": "Lightning layer shows observed lightning strikes in the area. Visualization is based on lightning age.", + "age1": "0-20 minutes old lightning", + "age2": "20-40 minutes old lightning", + "age3": "40-60 minutes old lightning" + }, "windArrows": { "title": "Wind arrows", "description": "Wind arrows show direction and strength of the 10 minute average wind. Strength is visualized with color and size of the arrow.", @@ -386,7 +400,11 @@ "arrow3": "Fresh breeze 8-14 m/s", "arrow4": "Gale 14-21 m/s", "arrow5": "Storm 21-32 m/s", - "arrow6": "Hurricane 32-> m/s" + "arrow6": "Hurricane 32-> m/s", + "layerInfo" : { + "short": "The layer shows wind direction and strength on a 1-hour time step from the next hour onward for 24 hours.", + "long": "The layer shows wind direction and strength on a 3-hour time step from the next hour onward for three days." + } }, "temperature": { "title": "Temperature", @@ -394,7 +412,11 @@ "temperatureMinus30": "-30°C", "temperatureMinus20": "-10°C", "temperature0": "0°C", - "temperature20": "20°C" + "temperature20": "20°C", + "layerInfo" : { + "short": "The layer displays temperature on a 1-hour time step from the next hour onward for 24 hours.", + "long": "The layer displays temperature on a 3-hour time step from the next hour onward for three days." + } }, "timeseriesLayerInfo": "The weather forecast on the map shows the weather symbol and temperature for numerous locations around the world. Tap the symbol to display more weather information." } diff --git a/i18n/fi.json b/i18n/fi.json index 63406c91..94199fb8 100644 --- a/i18n/fi.json +++ b/i18n/fi.json @@ -357,26 +357,40 @@ "infoBottomSheet": { "closeAccessibilityLabel": "Sulje kartan selitteet", "weatherSymbolsTitle": "Säämerkit", - "mapLayersInfoTitle": "Karttatasojen selitteet", + "mapLayersInfoTitle": "Karttatason kuvaus", "showMore": "Näytä lisää", "showLess": "Näytä vähemmän", "precipitation": { "title": "Sademäärä", "rainRadarInfo": "Havaitun ja ennustetun sateen voimakkuus esitetään väreinä.", - "precipitationObs": "Kartalla esitettävä sadehavainto on mitattu säätutkalla.", - "precipitationFcst": "Ennustettu sade on lyhyen ajan sade-ennuste, joka perustuu tutkakuviin ja sääennustemalleihin.", - "precipitationFinAndScandinavia": "Suomen alueella aika-askel on 15 minuuttia ja Skandinavian alueella yksi tunti.", "light": "heikkoa", "moderate": "kohtalaista", - "strong": "voimakasta" + "strong": "voimakasta", + "precipitationFin": { + "description": "Suomen tutkayhdistelmä sekä havaitut salamat 15 min aika-askeleella.", + "observation": "Kartalla esitettävä sadehavainto on mitattu Suomen alueen säätutkilla.", + "forecast": "Ennustettu sade on lyhyen ajan sade-ennuste, joka perustuu tutkakuviin ja sääennustemalleihin." + }, + "precipitationScan": { + "description": "Skandinavian tutkayhdistelmä sekä havaitut salamat 1 h aika-askeleella.", + "observation": "Kartalla esitettävä sadehavainto on mitattu Skandinavian alueen säätutkilla.", + "forecast": "Ennustettu sade on lyhyen ajan sade-ennuste, joka perustuu sääennustemalleihin." + } }, - "lightnings": { + "lightnings15": { "title": "Salamat", "description": "Salamakartta näyttää havaitut salamat alueella. Visualisointi perustuu salaman ikään.", "age1": "0-5 minuuttia vanha salama", "age2": "5-10 minuuttia vanha salama", "age3": "10-15 minuuttia vanha salama" }, + "lightnings60": { + "title": "Salamat", + "description": "Salamakartta näyttää havaitut salamat alueella. Visualisointi perustuu salaman ikään.", + "age1": "0-20 minuuttia vanha salama", + "age2": "20-40 minuuttia vanha salama", + "age3": "40-60 minuuttia vanha salama" + }, "windArrows": { "title": "Tuuli", "description": "Tuulinuolet näyttävät tuulen suunnan ja voimakkuuden 10 minuutin keskiarvona. Voimakkuus visualisoidaan värillä ja nuolen koolla.", @@ -386,7 +400,11 @@ "arrow3": "Navakkaa tuulta 8-14 m/s", "arrow4": "Kovaa tuulta 14-21 m/s", "arrow5": "Myrskyä 21-32 m/s", - "arrow6": "Hirmumyrskyä 32-> m/s" + "arrow6": "Hirmumyrskyä 32-> m/s", + "layerInfo" : { + "short": "Tasolla esitetään tuulen suunta ja voimakkuus 1h aika-askeleella seuraavasta alkavasta tunnista 24h eteenpäin.", + "long": "Tasolla esitetään tuulen suunta ja voimakkuus 3h aika-askeleella seuraavasta alkavasta tunnista kolme päivää eteenpäin." + } }, "temperature": { "title": "Lämpötila", @@ -394,7 +412,11 @@ "temperatureMinus30": "-30°C", "temperatureMinus20": "-10°C", "temperature0": "0°C", - "temperature20": "20°C" + "temperature20": "20°C", + "layerInfo" : { + "short": "Tasolla esitetään lämpötila 1h aika-askeleella seuraavasta alkavasta tunnista 24h eteenpäin.", + "long": "Tasolla esitetään lämpötila 3h aika-askeleella seuraavasta alkavasta tunnista kolme päivää eteenpäin." + } }, "timeseriesLayerInfo": "Sääennuste kartalla näyttää sääsymbolin ja lämpötilan lukuisille paikkakunnille ympäri maailman. Symbolia painamalla saa esille lisää säätietoa." } diff --git a/i18n/sv.json b/i18n/sv.json index a821a5b9..51ca967c 100644 --- a/i18n/sv.json +++ b/i18n/sv.json @@ -363,20 +363,34 @@ "precipitation": { "title": "Nederbörd", "rainRadarInfo": "Intensiteten av observerad och förutsagd nederbörd uttrycks i färger.", - "precipitationObs": "Observerad nederbörd på kartan har mätts med en väderadar.", - "precipitationFcst": "Nederbördsprognos är en korttidsprognos för regn baserat på radarbilder och väderprognosmodeller.", - "precipitationFinAndScandinavia": "Lager med 15 minuters tidssteg täcker Finland och lager med en timmes tidssteg täcker Skandinavien.", "light": "lätt", "moderate": "måttlig", - "strong": "kraftig" + "strong": "kraftig", + "precipitationFin": { + "description": "Finländsk radar-kombination med 15 minuters tidssteg.", + "observation": "Den regnobservation som presenteras på kartan har mätts med väderadar i Finland.", + "forecast": "Det förutspådda regnet är en korttidsprognos för nederbörd, baserad på radarbilder och väderprognosmodeller." + }, + "precipitationScan": { + "description": "Skandinavisk radar-kombination med 1 timmes tidssteg.", + "observation": "Den regnobservation som presenteras på kartan har mätts med väderadar i Skandinavien.", + "forecast": "Det förutspådda regnet är en korttidsprognos för nederbörd, baserad på väderprognosmodeller." + } }, - "lightnings": { + "lightnings15": { "title": "Blixtar", "description": "Blixtlagret visar observerade blixtar i området. Visualiseringen är baserad på blixternas ålder.", "age1": "0-5 minuter gammal blixt", "age2": "5-10 minuter gammal blixt", "age3": "10-15 minuter gammal blixt" }, + "lightnings60": { + "title": "Blixtar", + "description": "Blixtlagret visar observerade blixtar i området. Visualiseringen är baserad på blixternas ålder.", + "age1": "0-20 minuter gammal blixt", + "age2": "20-40 minuter gammal blixt", + "age3": "40-60 minuter gammal blixt" + }, "windArrows": { "title": "Vindpilar", "description": "Vindpilar visar riktning och styrka för det 10-minuters genomsnittliga vinden. Styrka visualiseras med färg och storlek på pilen.", @@ -386,7 +400,11 @@ "arrow3": "Frisisk vind 8-14 m/s", "arrow4": "Hård vind 14-21 m/s", "arrow5": "Storm 21-32 m/s", - "arrow6": "Orkan 32-> m/s" + "arrow6": "Orkan 32-> m/s", + "layerInfo" : { + "short": "Lagret visar vindriktning och styrka med 1 timmes tidssteg från nästa timme och 24 timmar framåt.", + "long": "Lagret visar vindriktning och styrka med 3 timmars tidssteg från nästa timme och tre dagar framåt." + } }, "temperature": { "title": "Temperatur", @@ -394,7 +412,11 @@ "temperatureMinus30": "-30°C", "temperatureMinus20": "-10°C", "temperature0": "0°C", - "temperature20": "20°C" + "temperature20": "20°C", + "layerInfo" : { + "short": "Lagret visar temperatur med 1 timmes tidssteg från nästa timme och 24 timmar framåt.", + "long": "Lagret visar temperatur med 3 timmars tidssteg från nästa timme och tre dagar framåt." + } }, "timeseriesLayerInfo": "Vädersymbolen och temperaturen på kartan visar väderprognosen på många orter runt om i världen. Genom att trycka på symbolen får man fram mer väderinformation." } diff --git a/src/components/map/sheets/InfoBottomSheet.tsx b/src/components/map/sheets/InfoBottomSheet.tsx index 3393ebdd..428e7055 100644 --- a/src/components/map/sheets/InfoBottomSheet.tsx +++ b/src/components/map/sheets/InfoBottomSheet.tsx @@ -76,32 +76,71 @@ const InfoBottomSheet: React.FC = ({ onClose }) => { - {layer?.legend?.hasPrecipitation && ( + {layer?.legend?.hasPrecipitationFin && ( {t( - 'infoBottomSheet.precipitation.precipitationFinAndScandinavia' + 'infoBottomSheet.precipitation.precipitationFin.description' )} )} - {layer?.legend?.hasPrecipitation && ( + {layer?.legend?.hasPrecipitationScan && ( + + + {t( + 'infoBottomSheet.precipitation.precipitationScan.description' + )} + + + )} + {(layer?.legend?.hasPrecipitationFin || + layer?.legend?.hasPrecipitationScan) && ( {t('infoBottomSheet.precipitation.title')} + + )} + {layer?.legend?.hasPrecipitationFin && ( + - {t('infoBottomSheet.precipitation.precipitationObs')} + {t( + 'infoBottomSheet.precipitation.precipitationFin.observation' + )} - {t('infoBottomSheet.precipitation.precipitationFcst')} + {t('infoBottomSheet.precipitation.precipitationFin.forecast')} + + )} + {layer?.legend?.hasPrecipitationScan && ( + + + + {t( + 'infoBottomSheet.precipitation.precipitationScan.observation' + )} + + + + + {t( + 'infoBottomSheet.precipitation.precipitationScan.forecast' + )} + + + + )} + {(layer?.legend?.hasPrecipitationFin || + layer?.legend?.hasPrecipitationScan) && ( + {t('infoBottomSheet.precipitation.rainRadarInfo')} @@ -172,16 +211,17 @@ const InfoBottomSheet: React.FC = ({ onClose }) => { )} - {layer?.legend?.hasLightning && ( + + {layer?.legend?.hasLightning15 && ( - {t('infoBottomSheet.lightnings.title')} + {t('infoBottomSheet.lightnings15.title')} - {t('infoBottomSheet.lightnings.description')} + {t('infoBottomSheet.lightnings15.description')} @@ -192,7 +232,7 @@ const InfoBottomSheet: React.FC = ({ onClose }) => { style={styles.lightningIcon} /> - {t('infoBottomSheet.lightnings.age1')} + {t('infoBottomSheet.lightnings15.age1')} @@ -201,7 +241,7 @@ const InfoBottomSheet: React.FC = ({ onClose }) => { style={styles.lightningIcon} /> - {t('infoBottomSheet.lightnings.age2')} + {t('infoBottomSheet.lightnings15.age2')} @@ -210,25 +250,95 @@ const InfoBottomSheet: React.FC = ({ onClose }) => { style={styles.lightningIcon} /> - {t('infoBottomSheet.lightnings.age3')} + {t('infoBottomSheet.lightnings15.age3')} )} - {layer?.legend?.hasWindArrows && ( + {layer?.legend?.hasLightning60 && ( - {t('infoBottomSheet.windArrows.title')} + {t('infoBottomSheet.lightnings60.title')} + + + + + {t('infoBottomSheet.lightnings60.description')} + + + + + + + + {t('infoBottomSheet.lightnings60.age1')} + + + + + + {t('infoBottomSheet.lightnings60.age2')} + + + + + + {t('infoBottomSheet.lightnings60.age3')} + + + + + + )} + + {layer?.legend?.hasWindArrowsShort && ( + + + + {t('infoBottomSheet.windArrows.layerInfo.short')} + + )} + {layer?.legend?.hasWindArrowsLong && ( + + {t('infoBottomSheet.windArrows.layerInfo.long')} + + + + )} + {(layer?.legend?.hasWindArrowsShort || + layer?.legend?.hasWindArrowsLong) && ( + + + + {t('infoBottomSheet.windArrows.title')} + + + + {t('infoBottomSheet.windArrows.description')} + + )} + {(layer?.legend?.hasWindArrowsShort || + layer?.legend?.hasWindArrowsLong) && ( + @@ -298,7 +408,27 @@ const InfoBottomSheet: React.FC = ({ onClose }) => { )} - {layer?.legend?.hasTemperature && ( + + {layer?.legend?.hasTemperatureShort && ( + + + + {t('infoBottomSheet.temperature.layerInfo.short')} + + + + )} + {layer?.legend?.hasTemperatureLong && ( + + + + {t('infoBottomSheet.temperature.layerInfo.long')} + + + + )} + {(layer?.legend?.hasTemperatureShort || + layer?.legend?.hasTemperatureLong) && ( @@ -314,7 +444,6 @@ const InfoBottomSheet: React.FC = ({ onClose }) => { {generateTemperatureLegend()} - = ({ onClose }) => { )} + {layerId === 7 && timeseriesEnabled && ( diff --git a/src/config/types.ts b/src/config/types.ts index 320311b1..c7724347 100644 --- a/src/config/types.ts +++ b/src/config/types.ts @@ -43,10 +43,14 @@ export interface MapLayer { type: 'WMS' | 'GeoJSON' | 'Timeseries'; name: { [lang: string]: string }; legend?: { - hasPrecipitation?: boolean; - hasLightning?: boolean; - hasWindArrows?: boolean; - hasTemperature?: boolean; + hasPrecipitationFin?: boolean; + hasPrecipitationScan?: boolean; + hasLightning15?: boolean; + hasLightning60?: boolean; + hasWindArrowsShort?: boolean; + hasWindArrowsLong?: boolean; + hasTemperatureShort?: boolean; + hasTemperatureLong?: boolean; }; sources: WMSSource[] | TimeseriesSource[]; times: Times;