From 7f6d96cbe75d285571bda4c78aa69da1e1303dcb Mon Sep 17 00:00:00 2001
From: Christian Gick <service@agiliton.eu>
Date: Fri, 3 Apr 2026 13:56:42 +0300
Subject: [PATCH] fix: switch map from MapLibre to Leaflet (minifier compat)

MapLibre inline style JSON was mangled by Hugo minifier.
Leaflet + OSM tiles is simpler and works reliably.
Updated map colors to Agiliton green palette.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 layouts/shortcodes/world-map.html | 127 +++++++++---------------------
 1 file changed, 38 insertions(+), 89 deletions(-)

diff --git a/layouts/shortcodes/world-map.html b/layouts/shortcodes/world-map.html
index d728db9..09b32ac 100644
--- a/layouts/shortcodes/world-map.html
+++ b/layouts/shortcodes/world-map.html
@@ -1,20 +1,18 @@
 {{ $lang := .Page.Language.Lang }}
 {{ $countries := hugo.Data.countries }}
 
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4.7.1/dist/maplibre-gl.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css" />
 <style>
 .ifk-map-wrap { max-width: 100%; margin: 2rem 0; }
 .ifk-map-wrap h3 { text-align: center; margin-bottom: 0.5rem; font-size: 1.25rem; }
 .ifk-map-subtitle { text-align: center; color: #666; font-size: 0.85rem; margin-bottom: 1rem; }
-#ifk-world-map { width: 100%; height: 420px; border-radius: 8px; }
+#ifk-world-map { width: 100%; height: 420px; border-radius: 8px; background: #f0f4f8; }
 .ifk-map-legend {
   display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
   margin-top: 1rem; font-size: 0.8rem;
 }
 .ifk-map-legend-item { display: flex; align-items: center; gap: 0.35rem; }
 .ifk-map-legend-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }
-.maplibregl-popup-content { font-size: 0.85rem; max-width: 260px; line-height: 1.4; }
-.maplibregl-popup-content strong { font-size: 0.95rem; }
 @media (max-width: 640px) { #ifk-world-map { height: 280px; } }
 </style>
 
@@ -23,20 +21,20 @@
   <p class="ifk-map-subtitle">{{ if eq $lang "de" }}Klicken Sie auf ein Land für Details{{ else if eq $lang "fr" }}Cliquez sur un pays pour plus de détails{{ else }}Click a country for details{{ end }}</p>
   <div id="ifk-world-map"></div>
   <div class="ifk-map-legend">
-    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#1e40af"></div>{{ if eq $lang "de" }}In Kraft{{ else if eq $lang "fr" }}En vigueur{{ else }}Enforced{{ end }}</div>
-    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#3b82f6"></div>{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}</div>
-    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#93c5fd"></div>{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div>
-    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#dbeafe"></div>{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div>
+    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#4d7c0f"></div>{{ if eq $lang "de" }}In Kraft{{ else if eq $lang "fr" }}En vigueur{{ else }}Enforced{{ end }}</div>
+    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#059669"></div>{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}</div>
+    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#86efac"></div>{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div>
+    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#d1fae5"></div>{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div>
     <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#e2e8f0"></div>{{ if eq $lang "de" }}Keine Daten{{ else if eq $lang "fr" }}Pas de données{{ else }}No Data{{ end }}</div>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4.7.1/dist/maplibre-gl.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
 <script>
 (function() {
   var LANG = {{ $lang }};
-  var STATUS_COLORS = { enforced: '#1e40af', passed: '#3b82f6', progress: '#93c5fd', guidelines: '#dbeafe' };
+  var STATUS_COLORS = { enforced: '#4d7c0f', passed: '#059669', progress: '#86efac', guidelines: '#d1fae5' };
   var STATUS_LABELS = {
     en: { enforced: 'Enforced', passed: 'Passed', progress: 'In Progress', guidelines: 'Guidelines' },
     de: { enforced: 'In Kraft', passed: 'Verabschiedet', progress: 'In Bearbeitung', guidelines: 'Richtlinien' },
@@ -47,96 +45,47 @@
   var byIsoNum = {};
   countries.forEach(function(c) { byIsoNum[c.isoNum] = c; });
 
-  var map = new maplibregl.Map({
-    container: 'ifk-world-map',
-    style: { version: 8, sources: { osm: { type: 'raster', tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'], tileSize: 256, attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>' } }, layers: [{ id: 'osm', type: 'raster', source: 'osm' }] },
-    center: [10, 25],
-    zoom: 1.5,
-    minZoom: 1,
-    maxZoom: 6,
-    scrollZoom: false,
-    attributionControl: true
+  var map = L.map('ifk-world-map', {
+    center: [25, 10], zoom: 2, minZoom: 2, maxZoom: 6,
+    scrollWheelZoom: false, zoomControl: true
   });
 
-  map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>',
+    maxZoom: 6
+  }).addTo(map);
 
-  map.on('load', function() {
-    fetch('https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json')
-      .then(function(r) { return r.json(); })
-      .then(function(topo) {
-        var geo = topojson.feature(topo, topo.objects.countries);
-
-        geo.features.forEach(function(f) {
-          var id = String(f.id).padStart(3, '0');
+  fetch('https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json')
+    .then(function(r) { return r.json(); })
+    .then(function(topo) {
+      var geo = topojson.feature(topo, topo.objects.countries);
+      L.geoJSON(geo, {
+        style: function(feature) {
+          var id = String(feature.id).padStart(3, '0');
           var c = byIsoNum[id];
-          f.properties.fillColor = c ? STATUS_COLORS[c.status] : '#e2e8f0';
-          f.properties.fillOpacity = c ? 0.65 : 0.15;
-          f.properties.isoNum = id;
-        });
-
-        map.addSource('countries-choropleth', { type: 'geojson', data: geo });
-
-        map.addLayer({
-          id: 'choropleth-fill',
-          type: 'fill',
-          source: 'countries-choropleth',
-          paint: {
-            'fill-color': ['get', 'fillColor'],
-            'fill-opacity': ['get', 'fillOpacity']
-          }
-        });
-
-        map.addLayer({
-          id: 'choropleth-outline',
-          type: 'line',
-          source: 'countries-choropleth',
-          paint: {
-            'line-color': '#94a3b8',
-            'line-width': 0.6
-          }
-        });
-
-        map.addLayer({
-          id: 'choropleth-hover',
-          type: 'fill',
-          source: 'countries-choropleth',
-          paint: {
-            'fill-color': '#1e293b',
-            'fill-opacity': 0
-          },
-          filter: ['==', 'isoNum', '']
-        });
-
-        var popup = new maplibregl.Popup({ closeButton: true, closeOnClick: false, maxWidth: '280px' });
-
-        map.on('mousemove', 'choropleth-fill', function(e) {
-          var id = e.features[0].properties.isoNum;
-          var c = byIsoNum[id];
-          map.getCanvas().style.cursor = c ? 'pointer' : '';
-          map.setFilter('choropleth-hover', ['==', 'isoNum', c ? id : '']);
-          map.setPaintProperty('choropleth-hover', 'fill-opacity', c ? 0.12 : 0);
-        });
-
-        map.on('mouseleave', 'choropleth-fill', function() {
-          map.getCanvas().style.cursor = '';
-          map.setFilter('choropleth-hover', ['==', 'isoNum', '']);
-          map.setPaintProperty('choropleth-hover', 'fill-opacity', 0);
-        });
-
-        map.on('click', 'choropleth-fill', function(e) {
-          var id = e.features[0].properties.isoNum;
+          return {
+            fillColor: c ? STATUS_COLORS[c.status] : '#e2e8f0',
+            weight: 0.8,
+            color: '#94a3b8',
+            fillOpacity: c ? 0.75 : 0.3
+          };
+        },
+        onEachFeature: function(feature, layer) {
+          var id = String(feature.id).padStart(3, '0');
           var c = byIsoNum[id];
           if (!c) return;
           var loc = c[LANG] || c.en;
           var labels = STATUS_LABELS[LANG] || STATUS_LABELS.en;
-          popup.setLngLat(e.lngLat).setHTML(
+          layer.bindPopup(
             '<strong>' + c.flag + ' ' + loc.name + '</strong><br>' +
             '<em>' + loc.law + '</em><br>' +
             '<span style="color:' + STATUS_COLORS[c.status] + ';font-weight:600">' + labels[c.status] + '</span> (' + c.year + ')<br>' +
             loc.detail
-          ).addTo(map);
-        });
-      });
-  });
+          );
+          layer.on('mouseover', function(e) { e.target.setStyle({ weight: 2, color: '#1e293b' }); });
+          layer.on('mouseout', function(e) { e.target.setStyle({ weight: 0.8, color: '#94a3b8' }); });
+        }
+      }).addTo(map);
+    });
 })();
 </script>