feat: Add buttons for zooming

Author: MoritzWeber0

assets/js/interactiveMap.js

@@ -22,6 +22,31 @@ window.initializeInteractiveMap = function() {
                 panzoom.zoomIn({ step: 0.5 });
             });
 
+            const zoomInBtn = document.querySelector('.o-interactive-map__zoom-in');
+            const zoomOutBtn = document.querySelector('.o-interactive-map__zoom-out');
+            const resetBtn = document.querySelector('.o-interactive-map__reset');
+
+            if (zoomInBtn) {
+                zoomInBtn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    panzoom.zoomIn({ step: 0.5 });
+                });
+            }
+
+            if (zoomOutBtn) {
+                zoomOutBtn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    panzoom.zoomOut({ step: 0.5 });
+                });
+            }
+
+            if (resetBtn) {
+                resetBtn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    panzoom.reset();
+                });
+            }
+
             // Add country click functionality
             const countries = svg.querySelectorAll('[id]');
             countries.forEach(country => {

assets/sass/interactiveMap.scss

@@ -1,4 +1,8 @@
 .o-interactive-map {
+  &__wrapper {
+    position: relative;
+  }
+
   &__container {
     border-radius: var(--border-radius-m);
     box-shadow: var(--box-shadow);
@@ -11,6 +15,16 @@
     }
   }
 
+  &__controls {
+    position: absolute;
+    bottom: 1rem;
+    right: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    z-index: 10;
+  }
+
   .o-interactive-map__country--available {
     path {
       fill: var(--link-default) !important;
@@ -26,4 +40,22 @@
   .o-interactive-map--loading {
     padding: 1rem;
   }
+
+  .o-interactive-map__controls button {
+    background-color: var(--link-default);
+    color: var(--bg-neutral);
+    border-radius: var(--border-radius-m);
+    border: 0;
+    width: 4rem;
+    aspect-ratio: 1 / 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 3rem;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: var(--link-hovered);
+    }
+  }
 }

i18n/de.yaml

@@ -36,7 +36,10 @@ information-disclaimer-short: >-
   rechtliche Verbindung zu FIP oder Bahngesellschaften.
 interactiveMap:
   loading: Lade interaktive Karte...
+  resetZoom: Zoom zurücksetzen
   title: Interaktive Länderkarte
+  zoomIn: Hineinzoomen
+  zoomOut: Herauszoomen
 menu-close: Schließen
 menu-open: Menü
 navigate-to-country: Gehe zu Land

i18n/en.yaml

@@ -35,7 +35,10 @@ information-disclaimer-short: >-
   legal connection to FIP or railway companies.
 interactiveMap:
   loading: Loading interactive map...
+  resetZoom: Reset Zoom
   title: Interactive Country Map
+  zoomIn: Zoom In
+  zoomOut: Zoom Out
 menu-close: Close
 menu-open: Menu
 navigate-to-country: Navigate to country

i18n/fr.yaml

@@ -30,6 +30,12 @@ home-page-text: Page d'accueil du FIP Guide
 information-disclaimer-short: >-
   Les informations fournies sont non officielles et sans garantie. Il n'existe
   aucun lien juridique avec le FIP ou les compagnies ferroviaires.
+interactiveMap:
+  loading: Chargement de la carte interactive...
+  resetZoom: Réinitialiser le zoom
+  title: Carte interactive des pays
+  zoomIn: Zoom avant
+  zoomOut: Zoom arrière
 menu-close: Fermer
 menu-open: Menu
 navigate-to-country: Aller au pays

layouts/country/list.html

@@ -20,8 +20,21 @@ <h2>{{ T "countries.overview" }}</h2>
       </div>
       <div class="o-interactive-map">
         <h2>{{ T "interactiveMap.title" }}</h2>
-        <div id="interactive-map__container" class="o-interactive-map__container">
-          <p class="o-interactive-map--loading"><em>{{ T "interactiveMap.loading" }}</em></p>
+        <div class="o-interactive-map__wrapper">
+          <div id="interactive-map__container" class="o-interactive-map__container">
+            <p class="o-interactive-map--loading"><em>{{ T "interactiveMap.loading" }}</em></p>
+          </div>
+          <div class="o-interactive-map__controls">
+            <button class="o-interactive-map__zoom-in" title="{{ T "interactiveMap.zoomIn" }}" aria-label="{{ T "interactiveMap.zoomIn" }}">
+              {{ partial "icon" "add" }}
+            </button>
+            <button class="o-interactive-map__zoom-out" title="{{ T "interactiveMap.zoomOut" }}" aria-label="{{ T "interactiveMap.zoomOut" }}">
+              {{ partial "icon" "remove" }}
+            </button>
+            <button class="o-interactive-map__reset" title="{{ T "interactiveMap.resetZoom" }}" aria-label="{{ T "interactiveMap.resetZoom" }}">
+              {{ partial "icon" "crop_free" }}
+            </button>
+          </div>
         </div>
       </div>
     </div>