From df72e6aaba70a054bb6caf60c961e373a4a6cd11 Mon Sep 17 00:00:00 2001
From: Christian Gick <service@agiliton.eu>
Date: Fri, 3 Apr 2026 12:08:28 +0300
Subject: [PATCH] feat: switch world map to MapLibre GL + clicksports vector
 tiles

Replace Leaflet+OSM with MapLibre GL JS consuming vector tiles
from maps.clicksports.de (TileServer GL). Choropleth overlay via
TopoJSON remains the same.

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

diff --git a/layouts/shortcodes/world-map.html b/layouts/shortcodes/world-map.html
index 40822f2..f8191cc 100644
--- a/layouts/shortcodes/world-map.html
+++ b/layouts/shortcodes/world-map.html
@@ -1,18 +1,20 @@
 {{ $lang := .Page.Language.Lang }}
 {{ $countries := hugo.Data.countries }}
 
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4.7.1/dist/maplibre-gl.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; background: #f0f4f8; }
+#ifk-world-map { width: 100%; height: 420px; border-radius: 8px; }
 .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>
 
@@ -29,7 +31,7 @@
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
+<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/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
 <script>
 (function() {
@@ -45,47 +47,96 @@
   var byIsoNum = {};
   countries.forEach(function(c) { byIsoNum[c.isoNum] = c; });
 
-  var map = L.map('ifk-world-map', {
-    center: [25, 10], zoom: 2, minZoom: 2, maxZoom: 6,
-    scrollWheelZoom: false, zoomControl: true
+  var map = new maplibregl.Map({
+    container: 'ifk-world-map',
+    style: 'https://maps.clicksports.de/styles/klokantech-basic/style.json',
+    center: [10, 25],
+    zoom: 1.5,
+    minZoom: 1,
+    maxZoom: 6,
+    scrollZoom: false,
+    attributionControl: true
   });
 
-  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>',
-    maxZoom: 6
-  }).addTo(map);
+  map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
 
-  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');
+  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');
           var c = byIsoNum[id];
-          return {
-            fillColor: c ? STATUS_COLORS[c.status] : '#e2e8f0',
-            weight: 0.8,
-            color: '#94a3b8',
-            fillOpacity: c ? 0.8 : 0.3
-          };
-        },
-        onEachFeature: function(feature, layer) {
-          var id = String(feature.id).padStart(3, '0');
+          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']
+          }
+        }, 'aeroway_fill');
+
+        map.addLayer({
+          id: 'choropleth-outline',
+          type: 'line',
+          source: 'countries-choropleth',
+          paint: {
+            'line-color': '#94a3b8',
+            'line-width': 0.6
+          }
+        }, 'aeroway_fill');
+
+        map.addLayer({
+          id: 'choropleth-hover',
+          type: 'fill',
+          source: 'countries-choropleth',
+          paint: {
+            'fill-color': '#1e293b',
+            'fill-opacity': 0
+          },
+          filter: ['==', 'isoNum', '']
+        }, 'aeroway_fill');
+
+        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;
           var c = byIsoNum[id];
           if (!c) return;
           var loc = c[LANG] || c.en;
           var labels = STATUS_LABELS[LANG] || STATUS_LABELS.en;
-          layer.bindPopup(
+          popup.setLngLat(e.lngLat).setHTML(
             '<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
-          );
-          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);
-    });
+          ).addTo(map);
+        });
+      });
+  });
 })();
 </script>