feat: Add interactive map to navigate countries

assets/js/interactiveMap.js

@@ -0,0 +1,64 @@
+import Panzoom from '@panzoom/panzoom';
+
+window.initializeInteractiveMap = function() {
+    const svg = document.querySelector('.o-interactive-map__container svg');
+    if (svg) {
+            // Ensure proper scaling
+            svg.setAttribute('viewBox', '0 0 1300 1300');
+
+            const panzoom = Panzoom(svg, {
+                maxScale: 5,
+                minScale: 1,
+                startScale: 1,
+                contain: 'outside'
+            });
+
+            // Enable mouse wheel zoom
+            svg.parentElement.addEventListener('wheel', panzoom.zoomWithWheel);
+
+            // Enable double-click zoom
+            svg.addEventListener('dblclick', (e) => {
+                e.preventDefault();
+                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 => {
+                if (window.availableCountries && window.availableCountries.includes(country.id)) {
+                    country.style.cursor = 'pointer';
+                    country.classList.add('o-interactive-map__country--available');
+
+                    country.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        window.location.href = `/${window.currentLanguage}/country/${country.id}/`;
+                    });
+                }
+            });
+    }
+};

assets/js/main.js

@@ -4,3 +4,4 @@ import './resizeObserver.js';
 import './mediaqueries.js';
 import './highlightHeadline.js';
 import './anchorlinks.js';
+import './interactiveMap.js';

assets/sass/interactiveMap.scss

@@ -0,0 +1,61 @@
+.o-interactive-map {
+  &__wrapper {
+    position: relative;
+  }
+
+  &__container {
+    border-radius: var(--border-radius-m);
+    box-shadow: var(--box-shadow);
+    width: 100%;
+    aspect-ratio: 1 / 1;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__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;
+      transition: all 0.2s ease;
+      cursor: pointer;
+    }
+
+    &:hover path {
+      fill: var(--link-hovered) !important;
+    }
+  }
+
+  .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);
+    }
+  }
+}

assets/sass/main.scss

@@ -16,3 +16,4 @@
 @import "booking.scss";
 @import "button.scss";
 @import "startpage.scss";
+@import "interactiveMap.scss";

assets/sass/styles.scss

@@ -142,6 +142,17 @@ img {
   align-items: center;
 }
 
+.o-list__countries{
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+
+  @media (max-width: #{$breakpoint-lg}) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
 @mixin add-columns($columns) {
   &--columns-#{$columns} {
     columns: $columns;

i18n/de.yaml

@@ -14,11 +14,13 @@ booking:
   reservation-costs: Reservierungskosten
   visit-additional-information-website: Weitere Informationen
   visit-booking-website: Zur Buchungsseite
+countries:
+  overview: Alle Länder
+  selection: Länderauswahl
 country:
   many: Länder
   one: Land
   other: Länder
-countryselection: Länderauswahl
 editPage: Seite bearbeiten
 footer-love:
   aria-label: Made with love in Aachen, Frankfurt, Köln & Paris
@@ -32,6 +34,12 @@ home-page-text: FIP Guide Startseite
 information-disclaimer-short: >-
   Diese Informationen sind inoffiziell und ohne Gewähr. Es besteht keine
   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

@@ -13,11 +13,13 @@ booking:
   reservation-costs: Reservation Costs
   visit-additional-information-website: Additional Information
   visit-booking-website: To Booking Website
+countries:
+  overview: All Countries
+  selection: choose country
 country:
   many: countries
   one: country
   other: countries
-countryselection: choose country
 editPage: Edit page
 footer-love:
   aria-label: Made with love in Aachen, Frankfurt, Cologne & Paris
@@ -31,6 +33,12 @@ home-page-text: FIP Guide Home Page
 information-disclaimer-short: >-
   The information provided is unofficial and without guarantee. There is no
   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

@@ -2,17 +2,63 @@
   <article class="o-list o-list__container">
     <h1 data-pagefind-meta="title">{{ .Title }}</h1>
     {{ .Content }}
-    <div class="o-list__list">
-      {{ range .Pages }}
-      <a href="{{ .RelPermalink }}" class="o-list__link">
-        <div class="o-list__picture">
-          {{ partial "flag" (dict "country" .File.ContentBaseName) }}
+    <div class="o-list__countries">
+      <div>
+        <h2>{{ T "countries.overview" }}</h2>
+        <div class="o-list__list">
+          {{ range .Pages }}
+          <a href="{{ .RelPermalink }}" class="o-list__link">
+            <div class="o-list__picture">
+              {{ partial "flag" (dict "country" .File.ContentBaseName) }}
+            </div>
+            <div>
+              {{ .Title }}
+            </div>
+          </a>
+          {{ end }}
         </div>
-        <div>
-          {{ .Title }}
+      </div>
+      <div class="o-interactive-map">
+        <h2>{{ T "interactiveMap.title" }}</h2>
+        <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>
-      </a>
-      {{ end }}
+      </div>
     </div>
   </article>
+
+
+  <script>
+    window.availableCountries = [
+      {{- range .Pages -}}
+      "{{ .File.ContentBaseName }}"{{ if not (eq . (index (last 1 $.Pages) 0)) }},{{ end }}
+      {{- end -}}
+    ];
+
+    window.currentLanguage = "{{ .Language.Lang }}";
+
+    fetch('/map_europe.svg')
+      .then(response => response.text())
+      .then(svgContent => {
+        document.getElementById('interactive-map__container').innerHTML = svgContent;
+
+        window.initializeInteractiveMap();
+      })
+      .catch(error => {
+        console.error('Error loading SVG:', error);
+      });
+  </script>
 {{ end }}

layouts/partials/menu.html

@@ -19,7 +19,7 @@
       <menu>
         <li class="o-header__item">
           <button class="o-header__expand-button" aria-haspopup="true" aria-expanded="false">
-            <span>{{ T "countryselection" }}</span>
+            <span>{{ T "countries.selection" }}</span>
             {{ partial "icon" "keyboard_arrow_down" }}
           </button>
           <span id="menu-country-list-title">{{ T "country" }}</span>

package.json

@@ -20,6 +20,7 @@
     "@fontsource/material-symbols-rounded": "^5.2.10",
     "@fontsource/roboto": "^5.2.5",
     "@fontsource/sansita": "^5.2.5",
+    "@panzoom/panzoom": "^4.6.0",
     "pagefind": "^1.3.0"
   },
   "devDependencies": {