Localizing Fullscreen, Geolocate, and Navigation controlls

frontend/components/media/MediaMap.vue

@@ -234,23 +234,42 @@ onMounted(() => {
     );
 
     // MARK: Basic Controls
-
+    
     map.addControl(
       new maplibregl.NavigationControl({
         visualizePitch: true,
       }),
       "top-left"
     );
-    map.addControl(new maplibregl.FullscreenControl());
-    map.addControl(
-      new maplibregl.GeolocateControl({
-        positionOptions: {
-          enableHighAccuracy: true,
-        },
-        trackUserLocation: true,
-      })
-    );
 
+    // Add localized tooltips for NavigationControl buttons
+    const zoomInButton = map.getContainer().querySelector(".maplibregl-ctrl-zoom-in");
+    if (zoomInButton) zoomInButton.title = i18n.t("components.media_map.zoom_in");
+
+    const zoomOutButton = map.getContainer().querySelector(".maplibregl-ctrl-zoom-out");
+    if (zoomOutButton) zoomOutButton.title = i18n.t("components.media_map.zoom_out");
+
+    const compassButton = map.getContainer().querySelector(".maplibregl-ctrl-compass");
+    if (compassButton) compassButton.title = i18n.t("components.media_map.reset_north");
+
+    // Localize FullscreenControl
+    const fullscreenControl = new maplibregl.FullscreenControl();
+    map.addControl(fullscreenControl);
+    const fullscreenButton = map.getContainer().querySelector(".maplibregl-ctrl-fullscreen");
+    if (fullscreenButton) fullscreenButton.title = i18n.t("components.media_map.fullscreen");
+
+    // Localize GeolocateControl
+    const geolocateControl = new maplibregl.GeolocateControl({
+      positionOptions: {
+        enableHighAccuracy: true,
+      },
+      trackUserLocation: true,
+    });
+    map.addControl(geolocateControl);
+    const geolocateButton = map.getContainer().querySelector(".maplibregl-ctrl-geolocate");
+    if (geolocateButton) geolocateButton.title = i18n.t("components.media_map.geolocate");
+
+
     const popup = new maplibregl.Popup({
       offset: 25,
     }).setHTML(

frontend/i18n/en-US.json

@@ -262,6 +262,11 @@
   "components.media_map.change_profile": "Change profile [p]",
   "components.media_map.clear_directions": "Clear directions",
   "components.media_map.maplibre_gl_alert": "Your browser does not support our mapping service MapLibre GL, so we won't be able to display maps.",
+  "components.media_map.zoom_in": "Zoom In",
+  "components.media_map.zoom_out": "Zoom Out",
+  "components.media_map.compass": "Reset compass",
+  "components.media_map.fullscreen": "Fullscreen",
+  "components.media_map.geolocation": "Geolocation",
   "components.modal.edit._global.join_organization_link": "Join organization link",
   "components.modal.edit._global.remember_https": "This is the URL that the join button will link to. Please include the full URL with https so the link works properly.",
   "components.modal.edit._global.update_texts": "Update texts",

frontend/i18n/es.json

@@ -259,6 +259,11 @@
   "components.logo_activist.aria_label": "El logotipo del activista que enlaza a la página de inicio",
   "components.media_image_carousel.img_alt_text": "Imagen de la organización o de su trabajo.",
   "components.media_map.maplibre_gl_alert": "Su navegador no es compatible con nuestro servicio de mapas MapLibre GL, por lo que no podremos mostrar mapas.",
+  "components.media_map.zoom_in": "Acercar",
+  "components.media_map.zoom_out": "Alejar",
+  "components.media_map.compass": "Restablecer brújula",
+  "components.media_map.fullscreen": "Pantalla completa",
+  "components.media_map.geolocation": "Geolocalización",
   "components.modal.edit._global.join_organization_link": "Unirse al enlace de la organización",
   "components.modal.edit._global.remember_https": "Esta es la URL a la que se vinculará el botón para unirse. Incluya la URL completa con https para que el enlace funcione correctamente.",
   "components.modal.edit._global.update_texts": "Actualizar textos",

frontend/i18n/fr.json

@@ -259,6 +259,11 @@
   "components.logo_activist.aria_label": "Le logo d'activist qui renvoie à la page d’accueil",
   "components.media_image_carousel.img_alt_text": "Image de l’organisation ou de son travail.",
   "components.media_map.maplibre_gl_alert": "Votre navigateur ne prend pas en charge notre service de cartographie MapLibre GL, nous ne pourrons donc pas afficher les cartes.",
+  "components.media_map.zoom_in": "Zoom In",
+  "components.media_map.zoom_out": "Zoom Out",
+  "components.media_map.compass": "Boussole",
+  "components.media_map.fullscreen": "Plein écran",
+  "components.media_map.geolocation": "Géolocalisation",
   "components.modal.edit._global.join_organization_link": "Lien vers l'organisation à joindre",
   "components.modal.edit._global.remember_https": "C’est l’URL vers laquelle le bouton de connexion va se connecter. Veuillez inclure l’URL complète avec https pour que le lien fonctionne correctement.",
   "components.modal.edit._global.update_texts": "Mettre à jour les textes",

frontend/i18n/pt.json

@@ -259,6 +259,11 @@
   "components.logo_activist.aria_label": "O logótipo do ativista que liga para a página inicial",
   "components.media_image_carousel.img_alt_text": "Imagem da organização ou do seu trabalho.",
   "components.media_map.maplibre_gl_alert": "O seu navegador não suporta o nosso serviço de mapeamento MapLibre GL, por isso não poderemos exibir mapas.",
+  "components.media_map.zoom_in": "Ampliar",
+  "components.media_map.zoom_out": "Reduzir",
+  "components.media_map.compass": "Repor bússola",       
+  "components.media_map.fullscreen": "Ecrã inteiro",
+  "components.media_map.geolocation": "Geolocalização",
   "components.modal.edit._global.join_organization_link": "Link para juntar-se à organização",
   "components.modal.edit._global.remember_https": "Este é o URL para o qual o botão \"Juntar-se\" irá ligar. Por favor, inclua o URL completo com https para que o link funcione corretamente.",
   "components.modal.edit._global.update_texts": "Atualizar textos",