feat: Add interactive map to navigate countries

Author: MoritzWeber0

assets/js/interactiveMap.js

@@ -0,0 +1,39 @@
+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 });
+            });
+
+            // 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,29 @@
+.o-interactive-map {
+  &__container {
+    border-radius: var(--border-radius-m);
+    box-shadow: var(--box-shadow);
+    width: 100%;
+    aspect-ratio: 1 / 1;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .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;
+  }
+}

assets/sass/main.scss

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

assets/sass/styles.scss

@@ -141,6 +141,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 Frankfurt & Köln
@@ -32,6 +34,9 @@ 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...
+  title: Interaktive Länderkarte
 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 Frankfurt & Cologne
@@ -31,6 +33,9 @@ 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...
+  title: Interactive Country Map
 menu-close: Close
 menu-open: Menu
 navigate-to-country: Navigate to country

layouts/country/list.html

@@ -2,18 +2,52 @@
   <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">
-          {{ $object := replace .Path (printf "/%s/" .Page.Type) "" }}
-          {{ partial "flag" $object }}
+
+    <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">
+              {{ $object := replace .Path (printf "/%s/" .Page.Type) "" }}
+              {{ partial "flag" $object }}
+            </div>
+            <div>
+              {{ .Title }}
+            </div>
+          </a>
+          {{ end }}
         </div>
-        <div>
-          {{ .Title }}
+      </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>
-      </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>