add localizations to world map

Author: joaojmendes

src/controls/worldMap/MapNavigation.tsx

@@ -13,6 +13,7 @@ import {
 
 import { MapRef } from 'react-map-gl/maplibre';
 import { css } from '@emotion/css';
+import strings from 'ControlStrings';
 
 export interface MapNavigationProps {
   mapRef: React.RefObject<MapRef>;
@@ -64,11 +65,11 @@ export const MapNavigation: React.FC<MapNavigationProps> = ({
 
   return (
     <div className={vertical ? `${navStyle} ${navStyleVertical}` : navStyle}>
-      <Tooltip content="Zoom in" relationship="label">
+      <Tooltip content={strings.worldMapZoomContent} relationship="label">
         <Button
           appearance="subtle"
           icon={<ZoomIn24Regular />}
-          aria-label="Zoom in"
+          aria-label={strings.worldMapZoomIn}
           className={buttonStyle}
           onClick={handleZoomIn}
         />
@@ -77,7 +78,7 @@ export const MapNavigation: React.FC<MapNavigationProps> = ({
         <Button
           appearance="subtle"
           icon={<ZoomOut24Regular />}
-          aria-label="Zoom out"
+          aria-label={strings.worldMapZoomOut}
           className={buttonStyle}
           onClick={handleZoomOut}
         />
@@ -86,7 +87,7 @@ export const MapNavigation: React.FC<MapNavigationProps> = ({
         <Button
           appearance="subtle"
           icon={<ArrowReset24Regular />}
-          aria-label="Reset"
+          aria-label={strings.worldMapReset}
           className={buttonStyle}
           onClick={handleReset}
         />

src/controls/worldMap/Marker.tsx

@@ -7,7 +7,7 @@ import { Marker as MapMarker } from 'react-map-gl/maplibre';
 import TooltipContent from './TooltipContent';
 import { css } from '@emotion/css';
 
-const useStyles = () => {
+const useStyles = (): { flag: string; tooltipContent: string } => {
   return {
     flag: css`
       width: 22px;

src/controls/worldMap/TooltipContent.tsx

@@ -7,6 +7,7 @@ import {
 
 import { IData } from "./IData";
 import { css } from "@emotion/css";
+import strings from "ControlStrings";
 
 export interface CountryTooltipContentProps {
  data: IData;
@@ -62,9 +63,9 @@ export const TooltipContent: React.FC<CountryTooltipContentProps> = ({
         <Text className={titleStyles}>{data.name}</Text>
       </div>
       <div className={rowStyles}>
-        <Text className={subTitleStyles}>Coord:</Text>
-        <Text>{data.coordinates[1].toFixed(2)}° N</Text>
-        <Text>{data.coordinates[0].toFixed(2)}° E</Text>
+        <Text className={subTitleStyles}>{strings.worldMapCoord}</Text>
+        <Text>{data.coordinates[1].toFixed(2)}{strings.worldMapN}</Text>
+        <Text>{data.coordinates[0].toFixed(2)}{strings.worldMapE}</Text>
       </div>
     </div>
   );

src/controls/worldMap/WorldMapControl.tsx

@@ -11,6 +11,7 @@ import { IMaplibreWorldMapProps } from './IMaplibreWorldMapProps';
 import MapNavigation from './MapNavigation';
 import Marker from './Marker';
 import { css } from '@emotion/css';
+import strings from 'ControlStrings';
 import { useCleanMapStyle } from './useCleanMapStyle';
 
 const MULTI_STYLE_URLS = {
@@ -97,8 +98,8 @@ export const MaplibreWorldMap: React.FC<IMaplibreWorldMapProps> = ({
   // Search configuration with defaults
   const searchConfig = useMemo(() => ({
     enabled: search?.enabled ?? true,
-    placeholder: search?.placeholder ?? 'Search locations...',
-    searchField: search?.searchField ?? 'name',
+    placeholder: search?.placeholder ?? strings.worldMapSearchLocations,
+    searchField: search?.searchField ?? strings.worldMapSearchField,
     zoomLevel: search?.zoomLevel ?? 8,
     position: {
       top: '10px',
@@ -209,12 +210,12 @@ export const MaplibreWorldMap: React.FC<IMaplibreWorldMapProps> = ({
   }, [filteredData, fitPadding]);
 
   if (!cleanStyle) {
-    return <Text>Loading map style…</Text>;
+    return <Text>{strings.worldMapLoadintText}</Text>;
   }
 
   return (
     <div className={styles.container}>
-      <Subtitle1>{title ?? 'World Map'}</Subtitle1>
+      <Subtitle1>{title ?? strings.worldMapTitle}</Subtitle1>
       <div className={styles.mapContainer}>
         <Map
           ref={mapRef}
@@ -259,8 +260,8 @@ export const MaplibreWorldMap: React.FC<IMaplibreWorldMapProps> = ({
             />
             {searchTerm && (
               <div className={styles.searchResults}>
-                {filteredData.length} location
-                {filteredData.length !== 1 ? 's' : ''} found
+                {filteredData.length} {strings.worldMapLocationLabel}
+                {filteredData.length !== 1 ? 's' : ''} {strings.worldMapFoundLabel}
               </div>
             )}
           </div>

src/controls/worldMap/index.ts

@@ -1,7 +1,6 @@
 export * from './IData';
 export * from './IWorldMapProps';
 export * from './IMaplibreWorldMapProps';
-
 export * from './WorldMap';
 export * from './WorldMapControl';
 

src/loc/bg-bg.ts

@@ -5,6 +5,17 @@ define([], () => {
   CalendarControlDayOfWeekSunday: "Sunday",
   TermSertNaviagtionErrorMessage: "TermSet not found",
   TermSetNavigationNoTerms: "No terms defined",
+  worldMapCoord: "Coord:",
+  worldMapE: "° E",
+  worldMapFoundLabel: "found",
+  worldMapLoadintText: "Loading map style…",
+  worldMapLocationLabel: "location",
+  worldMapN: "° N",
+  worldMapSearchField: "name",
+  worldMapSearchLocations: "Search locations...",
+  worldMapTitle: "World Map",
+  worldMapZoomContent: "Zoom in",
+  worldMapZoomIn: "Zoom in",
   "Save": "Спасявам",
   "Cancel": "Задрасквам",
   "SiteBreadcrumbLabel": "Сайт за хляб",

src/loc/ca-es.ts

@@ -5,6 +5,17 @@ define([], () => {
   CalendarControlDayOfWeekSunday: "Sunday",
   TermSertNaviagtionErrorMessage: "TermSet not found",
   TermSetNavigationNoTerms: "No terms defined",
+  worldMapCoord: "Coord:",
+  worldMapE: "° E",
+  worldMapFoundLabel: "found",
+  worldMapLoadintText: "Loading map style…",
+  worldMapLocationLabel: "location",
+  worldMapN: "° N",
+  worldMapSearchField: "name",
+  worldMapSearchLocations: "Search locations...",
+  worldMapTitle: "World Map",
+  worldMapZoomContent: "Zoom in",
+  worldMapZoomIn: "Zoom in",
   "Save": "Salvar",
   "Cancel": "Cancel·lar",
   "SiteBreadcrumbLabel": "Lloc web d'engruna",

src/loc/cs-cz.ts

@@ -478,5 +478,16 @@ define([], () => {
     ImagePickerUploadLocationSharePointLabel: "Aktuální web",
     ImagePickerRetryButtonLabel: "Zkusit znovu",
     ImagePickerDeleteLabel: "Odstranit",
+  worldMapCoord: "Coord:",
+  worldMapE: "° E",
+  worldMapFoundLabel: "found",
+  worldMapLoadintText: "Loading map style…",
+  worldMapLocationLabel: "location",
+  worldMapN: "° N",
+  worldMapSearchField: "name",
+  worldMapSearchLocations: "Search locations...",
+  worldMapTitle: "World Map",
+  worldMapZoomContent: "Zoom in",
+  worldMapZoomIn: "Zoom in",
   };
 });

src/loc/da-dk.ts

@@ -5,6 +5,17 @@ define([], () => {
   CalendarControlDayOfWeekSunday: "Sunday",
   TermSertNaviagtionErrorMessage: "TermSet not found",
   TermSetNavigationNoTerms: "No terms defined",
+  worldMapCoord: "Coord:",
+  worldMapE: "° E",
+  worldMapFoundLabel: "found",
+  worldMapLoadintText: "Loading map style…",
+  worldMapLocationLabel: "location",
+  worldMapN: "° N",
+  worldMapSearchField: "name",
+  worldMapSearchLocations: "Search locations...",
+  worldMapTitle: "World Map",
+  worldMapZoomContent: "Zoom in",
+  worldMapZoomIn: "Zoom in",
   "Save": "Spare",
   "Cancel": "Aflyse",
   "SiteBreadcrumbLabel": "Hjemmeside breadcrumb",

src/loc/de-de.ts

@@ -5,6 +5,17 @@ define([], () => {
   CalendarControlDayOfWeekSunday: "Sunday",
   TermSertNaviagtionErrorMessage: "TermSet not found",
   TermSetNavigationNoTerms: "No terms defined",
+  worldMapCoord: "Coord:",
+  worldMapE: "° E",
+  worldMapFoundLabel: "found",
+  worldMapLoadintText: "Loading map style…",
+  worldMapLocationLabel: "location",
+  worldMapN: "° N",
+  worldMapSearchField: "name",
+  worldMapSearchLocations: "Search locations...",
+  worldMapTitle: "World Map",
+  worldMapZoomContent: "Zoom in",
+  worldMapZoomIn: "Zoom in",
   "Save": "Speichern",
   "Cancel": "Abbrechen",
   "SiteBreadcrumbLabel": "Website Brotkrume",