feat(base-map): Add support for i18n on map controls

.storybook/react-intl.js

@@ -15,6 +15,7 @@ const locales = ["en-US", "fr", "es", "vi", "ko", "zh", "unknown"];
  * FIXME: remove in favor of a loop on package names.
  */ 
 const packages = [
+  "base-map",
   "endpoints-overlay",
   "from-to-location-picker",
   "itinerary-body",

packages/base-map/i18n/en-US.yml

@@ -0,0 +1,16 @@
+otpUi:
+  mapControls:
+    CooperativeGesturesHandler:
+      MacHelpText: Use ⌘ + scroll to zoom the map
+      MobileHelpText: Use two fingers to move the map
+      WindowsHelpText: Use Ctrl + scroll to zoom the map
+    NavigationControl:
+      ResetBearing: Reset bearing to north
+      ZoomIn: Zoom in
+      ZoomOut: Zoom out
+    ScaleControl:
+      Feet: ft
+      Kilometers: km
+      Meters: m
+      Miles: mi
+      NauticalMiles: nm

packages/base-map/i18n/fr.yml

@@ -0,0 +1,16 @@
+otpUi:
+  mapControls:
+    CooperativeGesturesHandler:
+      MacHelpText: Utilisez ⌘ + défil pour zoomer sur la carte
+      MobileHelpText: Utilisez deux doigts pour déplacer la carte
+      WindowsHelpText: Utilisez Ctrl + défil pour zoomer sur la carte
+    NavigationControl:
+      ResetBearing: Repositioner le nord en haut de la carte
+      ZoomIn: Zoom avant
+      ZoomOut: Zoom arrière
+    ScaleControl:
+      Feet: ft
+      Kilometers: km
+      Meters: m
+      Miles: mi
+      NauticalMiles: nm

packages/base-map/i18n/i18n-exceptions.json

@@ -0,0 +1,21 @@
+{
+  "groups": {
+    "otpUi.mapControls.CooperativeGesturesHandler.*": [
+      "MacHelpText",
+      "MobileHelpText",
+      "WindowsHelpText"
+    ],
+    "otpUi.mapControls.NavigationControl.*": [
+      "ResetBearing",
+      "ZoomIn",
+      "ZoomOut"
+    ],
+    "otpUi.mapControls.ScaleControl.*": [
+      "Feet",
+      "Kilometers",
+      "Meters",
+      "Miles",
+      "NauticalMiles"
+    ]
+  }
+}

packages/base-map/src/index.tsx

@@ -2,9 +2,12 @@ import React, { useCallback, useEffect, useState } from "react";
 import { Map, MapProps } from "react-map-gl";
 import maplibregl, { Event } from "maplibre-gl";
 
+import { useIntl } from "react-intl";
+
 import * as Styled from "./styled";
 import * as util from "./util";
 import MarkerWithPopup from "./MarkerWithPopup";
+import mapControlTranslationObject from "./mapControlLocale";
 
 /**
  * The BaseMap component renders a MapLibre map
@@ -76,6 +79,8 @@ const BaseMap = ({
     zoom: initZoom
   });
 
+  const intl = useIntl();
+
   // Firefox and Safari on iOS: hover is not triggered when the user touches the layer selector
   // (unlike Firefox or Chromium on Android), so we have to detect touch and trigger hover ourselves.
   const [fakeMobileHover, setFakeHover] = useState(false);
@@ -132,6 +137,7 @@ const BaseMap = ({
       {...mapLibreProps}
       id={id}
       latitude={viewState.latitude}
+      locale={mapControlTranslationObject(intl)}
       longitude={viewState.longitude}
       mapLib={maplibregl}
       mapStyle={activeBaseLayer}

packages/base-map/src/mapControlLocale.tsx

@@ -0,0 +1,34 @@
+import { IntlShape } from "react-intl";
+
+// Creates a language file to pass to MapLibre that has this format:
+// https://github.com/maplibre/maplibre-gl-js/blob/main/src/ui/default_locale.ts
+
+const MAP_CONTROL_TRANSLATION_KEYS = [
+  "NavigationControl.ResetBearing",
+  "NavigationControl.ZoomIn",
+  "NavigationControl.ZoomOut",
+  "ScaleControl.Feet",
+  "ScaleControl.Meters",
+  "ScaleControl.Kilometers",
+  "ScaleControl.Miles",
+  "ScaleControl.NauticalMiles",
+  "CooperativeGesturesHandler.WindowsHelpText",
+  "CooperativeGesturesHandler.MacHelpText",
+  "CooperativeGesturesHandler.MobileHelpText"
+];
+
+const mapControlTranslationObject = (
+  intl: IntlShape
+): Record<string, string> => {
+  const languageObject = {};
+
+  MAP_CONTROL_TRANSLATION_KEYS.forEach(x => {
+    languageObject[x] = intl.formatMessage({
+      id: `otpUi.mapControls.${x}`
+    });
+  });
+
+  return languageObject;
+};
+
+export default mapControlTranslationObject;