From a0b862acf4fa813390a02eb535f751712072cc8e Mon Sep 17 00:00:00 2001
From: Christian Gick <service@agiliton.eu>
Date: Sat, 4 Apr 2026 08:37:10 +0300
Subject: [PATCH] fix: switch map from MapLibre GL to Leaflet SVG, eliminates
 tile seams

MapLibre GL WebGL renderer tiles all sources internally, causing
visible seam lines on retina displays. Leaflet renders GeoJSON as
SVG paths in a single layer - zero tiling, zero seams.

Also replaces child-safety-map with world-map on all homepages.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 content/de/_index.md              |   2 +-
 content/en/_index.md              |   2 +-
 content/fr/_index.md              |   2 +-
 layouts/shortcodes/world-map.html | 227 ++++++++++++++----------------
 4 files changed, 106 insertions(+), 127 deletions(-)

diff --git a/content/de/_index.md b/content/de/_index.md
index 0b03dd1..579f40d 100644
--- a/content/de/_index.md
+++ b/content/de/_index.md
@@ -11,6 +11,6 @@ Der Schutz von Kindern im Internet ist eine der wichtigsten Herausforderungen un
 - **Online-Sicherheitstools** — Bewertungen und Anleitungen für Kindersicherungen, VPNs und Inhaltsfilter
 - **Digitale Erziehung** — Praktische Ratschläge für die Kindererziehung in einer vernetzten Welt
 
-{{< child-safety-map >}}
+{{< world-map >}}
 
 *Herausgegeben von [Agiliton](https://www.agiliton.eu), einem europäischen Technologieunternehmen für Datenschutz, Sicherheit und Familienschutz.*
diff --git a/content/en/_index.md b/content/en/_index.md
index bb22a89..0de4dc7 100644
--- a/content/en/_index.md
+++ b/content/en/_index.md
@@ -11,6 +11,6 @@ Protecting children online is one of the most important challenges of our time.
 - **Online Safety Tools** — Reviews and guides for parental controls, VPNs, and content filters
 - **Digital Parenting** — Practical advice for raising children in a connected world
 
-{{< child-safety-map >}}
+{{< world-map >}}
 
 *Published by [Agiliton](https://www.agiliton.eu), a European technology company focused on privacy, security, and family protection.*
diff --git a/content/fr/_index.md b/content/fr/_index.md
index 011c383..114f55b 100644
--- a/content/fr/_index.md
+++ b/content/fr/_index.md
@@ -11,6 +11,6 @@ Protéger les enfants en ligne est l'un des défis les plus importants de notre
 - **Outils de sécurité en ligne** — Tests et guides pour le contrôle parental, les VPN et les filtres de contenu
 - **Parentalité numérique** — Conseils pratiques pour élever des enfants dans un monde connecté
 
-{{< child-safety-map >}}
+{{< world-map >}}
 
 *Publié par [Agiliton](https://www.agiliton.eu), une entreprise technologique européenne spécialisée dans la confidentialité, la sécurité et la protection des familles.*
diff --git a/layouts/shortcodes/world-map.html b/layouts/shortcodes/world-map.html
index 004199a..27472a5 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="{{ "css/maplibre-gl.min.css" | relURL }}" />
+<link rel="stylesheet" href="{{ "css/leaflet.min.css" | relURL }}" />
 <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: #dce4ec; }
 .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: 280px; line-height: 1.4; padding: 0.75rem; }
-.maplibregl-popup-content strong { font-size: 0.95rem; }
 .ifk-popup-status { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-weight: 600; font-size: 0.8rem; color: white; margin: 0.3rem 0; }
 .ifk-popup-age { display: flex; align-items: center; gap: 0.35rem; margin: 0.3rem 0; font-size: 0.8rem; color: #555; }
 .ifk-popup-detail { margin: 0.4rem 0; font-size: 0.82rem; color: #444; }
@@ -36,148 +34,129 @@
   </div>
 </div>
 
-<script src="{{ "js/maplibre-gl.min.js" | relURL }}"></script>
+<script src="{{ "js/leaflet.min.js" | relURL }}"></script>
 <script src="{{ "js/topojson-client.min.js" | relURL }}"></script>
 <script>
-function ifkInitMap() {
-  if (typeof maplibregl === 'undefined' || typeof topojson === 'undefined') {
-    setTimeout(ifkInitMap, 100);
-    return;
-  }
+(function() {
   var LANG = "{{ $lang }}";
   var STATUS_COLORS = { enforced: '#667eea', passed: '#764ba2', progress: '#a5b4fc', guidelines: '#e0e7ff' };
-  // Pre-blended colors (over white bg) to avoid tile-seam artifacts from partial opacity
-  var FILL_COLORS = { enforced: '#9cabf1', passed: '#a68ac3', progress: '#c5cefd', guidelines: '#ebefff' };
-  var NO_DATA_FILL = '#f0f1f4';
   var STATUS_LABELS = {
     en: { enforced: 'Enforced', passed: 'Passed', progress: 'In Progress', guidelines: 'Guidelines' },
     de: { enforced: 'In Kraft', passed: 'Verabschiedet', progress: 'In Bearbeitung', guidelines: 'Richtlinien' },
     fr: { enforced: 'En vigueur', passed: 'Adopté', progress: 'En cours', guidelines: 'Directives' }
   };
+  var AGE_LABELS = { en: 'Min. social media age', de: 'Min. Social-Media-Alter', fr: 'Âge min. réseaux sociaux' };
+  var ARTICLE_ANCHORS = {
+    AUS: 'australia', DEU: 'germany', USA: 'the-united-states',
+    FRA: 'france', BRA: 'brazil'
+  };
+  if (LANG === 'de') {
+    ARTICLE_ANCHORS.AUS = 'australien';
+    ARTICLE_ANCHORS.USA = 'die-vereinigten-staaten';
+    ARTICLE_ANCHORS.DEU = 'deutschland';
+    ARTICLE_ANCHORS.BRA = 'brasilien';
+  }
 
   var countries = {{ $countries | jsonify | safeJS }};
   var byIsoNum = {};
   countries.forEach(function(c) { byIsoNum[c.isoNum] = c; });
 
-  window._ifkMap = new maplibregl.Map({
-    container: 'ifk-world-map',
-    antialias: false,
-    renderWorldCopies: false,
-    fadeDuration: 0,
-    style: {
-      version: 8,
-      sources: {},
-      layers: [
-        { id: 'background', type: 'background', paint: { 'background-color': '#dce4ec' } }
-      ]
-    },
+  var map = L.map('ifk-world-map', {
     center: [20, 20],
     zoom: 2,
-    minZoom: 1,
+    minZoom: 2,
     maxZoom: 6,
-    cooperativeGestures: true,
-    attributionControl: false
+    scrollWheelZoom: false,
+    attributionControl: false,
+    zoomControl: false
   });
 
-  window._ifkMap.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
-  window._ifkMap.addControl(new maplibregl.FullscreenControl(), 'top-right');
+  L.control.zoom({ position: 'topright' }).addTo(map);
 
-  window._ifkMap.on('load', function() {
-    fetch('{{ "data/countries-50m.json" | relURL }}')
-      .then(function(r) { return r.json(); })
-      .then(function(topo) {
-        // Land mass (white on ocean background) — single polygon, no tile seams
-        var land = topojson.feature(topo, topo.objects.land);
-        window._ifkMap.addSource('land', { type: 'geojson', data: land });
-        window._ifkMap.addLayer({
-          id: 'land-fill', type: 'fill', source: 'land',
-          paint: { 'fill-color': '#ffffff', 'fill-antialias': false }
-        });
+  // Enable scroll zoom in fullscreen
+  document.addEventListener('fullscreenchange', function() {
+    if (document.fullscreenElement) map.scrollWheelZoom.enable();
+    else map.scrollWheelZoom.disable();
+  });
 
-        // Country choropleth
-        var geo = topojson.feature(topo, topo.objects.countries);
-        geo.features.forEach(function(f) {
-          var id = String(f.id).padStart(3, '0');
+  // Fullscreen button
+  var FsControl = L.Control.extend({
+    options: { position: 'topright' },
+    onAdd: function() {
+      var btn = L.DomUtil.create('div', 'leaflet-bar');
+      var a = L.DomUtil.create('a', '', btn);
+      a.href = '#'; a.title = 'Fullscreen'; a.setAttribute('role', 'button');
+      a.innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 9H0v5h5v-2H2V9zm0-4h3V3H2V0H0v5zm10 7H9v2h5V9h-2v3zM9 0v2h3v3h2V0H9z" fill="currentColor"/></svg>';
+      a.style.cssText = 'display:flex;align-items:center;justify-content:center;width:30px;height:30px;';
+      L.DomEvent.on(a, 'click', function(e) {
+        L.DomEvent.stop(e);
+        var el = document.getElementById('ifk-world-map');
+        if (!document.fullscreenElement) el.requestFullscreen();
+        else document.exitFullscreen();
+      });
+      return btn;
+    }
+  });
+  new FsControl().addTo(map);
+
+  var hoveredLayer = null;
+
+  function resetStyle(layer) {
+    layer.setStyle({ weight: 0.5, color: '#94a3b8' });
+  }
+
+  function highlightStyle(layer) {
+    layer.setStyle({ weight: 2.5, color: '#667eea' });
+    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) layer.bringToFront();
+  }
+
+  fetch('{{ "data/countries-50m.json" | relURL }}')
+    .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 ? FILL_COLORS[c.status] : '#ffffff';
-          f.properties.isoNum = id;
-        });
-
-        window._ifkMap.addSource('countries-choropleth', { type: 'geojson', data: geo });
-
-        window._ifkMap.addLayer({
-          id: 'choropleth-fill', type: 'fill', source: 'countries-choropleth',
-          paint: { 'fill-color': ['get', 'fillColor'], 'fill-antialias': false }
-        });
-
-        // Country borders from TopoJSON mesh (shared edges only — no tile seams)
-        var borders = topojson.mesh(topo, topo.objects.countries, function(a, b) { return a !== b; });
-        window._ifkMap.addSource('borders', { type: 'geojson', data: borders });
-        window._ifkMap.addLayer({
-          id: 'choropleth-outline', type: 'line', source: 'borders',
-          paint: { 'line-color': '#94a3b8', 'line-width': 0.5 }
-        });
-
-        var popup = new maplibregl.Popup({ closeButton: true, closeOnClick: false, maxWidth: '280px' });
-
-        // Hover highlight layer
-        window._ifkMap.addLayer({
-          id: 'choropleth-hover',
-          type: 'line',
-          source: 'countries-choropleth',
-          paint: { 'line-color': '#667eea', 'line-width': 2 },
-          filter: ['==', 'isoNum', '']
-        });
-
-        window._ifkMap.on('mousemove', 'choropleth-fill', function(e) {
-          var id = e.features[0].properties.isoNum;
-          var c = byIsoNum[id];
-          window._ifkMap.getCanvas().style.cursor = c ? 'pointer' : '';
-          window._ifkMap.setFilter('choropleth-hover', c ? ['==', 'isoNum', id] : ['==', 'isoNum', '']);
-        });
-
-        window._ifkMap.on('mouseleave', 'choropleth-fill', function() {
-          window._ifkMap.getCanvas().style.cursor = '';
-          window._ifkMap.setFilter('choropleth-hover', ['==', 'isoNum', '']);
-        });
-
-        // Anchor map: country ISO3 → article heading slug
-        var ARTICLE_ANCHORS = {
-          AUS: 'australia', GBR: '', DEU: 'germany', USA: 'the-united-states',
-          FRA: 'france', BRA: 'brazil', IND: '', ITA: '', ESP: '', NOR: '',
-          CHN: '', KOR: '', IRL: '', NLD: '', SWE: '', CAN: '', JPN: ''
-        };
-        if (LANG === 'de') {
-          ARTICLE_ANCHORS.AUS = 'australien';
-          ARTICLE_ANCHORS.USA = 'die-vereinigten-staaten';
-          ARTICLE_ANCHORS.DEU = 'deutschland';
-          ARTICLE_ANCHORS.BRA = 'brasilien';
-        }
-
-        var AGE_LABELS = { en: 'Min. social media age', de: 'Min. Social-Media-Alter', fr: 'Âge min. réseaux sociaux' };
-
-        window._ifkMap.on('click', 'choropleth-fill', function(e) {
-          var id = e.features[0].properties.isoNum;
+          return {
+            fillColor: c ? STATUS_COLORS[c.status] : '#e2e8f0',
+            fillOpacity: c ? 0.65 : 0.15,
+            weight: 0.5,
+            color: '#94a3b8'
+          };
+        },
+        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;
-          var ageLabel = AGE_LABELS[LANG] || AGE_LABELS.en;
-          var statusBg = STATUS_COLORS[c.status];
-          var html = '<strong>' + c.flag + ' ' + loc.name + '</strong><br>' +
-            '<em>' + loc.law + '</em><br>' +
-            '<span class="ifk-popup-status" style="background:' + statusBg + '">' + labels[c.status] + ' (' + c.year + ')</span>' +
-            '<div class="ifk-popup-age">👤 ' + ageLabel + ': <strong>' + c.ageLimitSocial + '+</strong></div>' +
-            '<div class="ifk-popup-detail">' + loc.detail + '</div>';
-          var anchor = ARTICLE_ANCHORS[c.iso3];
-          if (anchor) {
-            var readMore = { en: 'Read more ↓', de: 'Weiterlesen ↓', fr: 'En savoir plus ↓' };
-            html += '<a class="ifk-popup-link" href="#' + anchor + '">' + (readMore[LANG] || readMore.en) + '</a>';
-          }
-          popup.setLngLat(e.lngLat).setHTML(html).addTo(window._ifkMap);
-        });
-      });
-  });
-}
-ifkInitMap();
+
+          layer.on('mouseover', function() {
+            highlightStyle(layer);
+            hoveredLayer = layer;
+          });
+          layer.on('mouseout', function() {
+            resetStyle(layer);
+            hoveredLayer = null;
+          });
+          layer.on('click', function(e) {
+            var loc = c[LANG] || c.en;
+            var labels = STATUS_LABELS[LANG] || STATUS_LABELS.en;
+            var ageLabel = AGE_LABELS[LANG] || AGE_LABELS.en;
+            var html = '<strong>' + c.flag + ' ' + loc.name + '</strong><br>' +
+              '<em>' + loc.law + '</em><br>' +
+              '<span class="ifk-popup-status" style="background:' + STATUS_COLORS[c.status] + '">' + labels[c.status] + ' (' + c.year + ')</span>' +
+              '<div class="ifk-popup-age">&#x1F464; ' + ageLabel + ': <strong>' + c.ageLimitSocial + '+</strong></div>' +
+              '<div class="ifk-popup-detail">' + loc.detail + '</div>';
+            var anchor = ARTICLE_ANCHORS[c.iso3];
+            if (anchor) {
+              var readMore = { en: 'Read more &darr;', de: 'Weiterlesen &darr;', fr: 'En savoir plus &darr;' };
+              html += '<a class="ifk-popup-link" href="#' + anchor + '">' + (readMore[LANG] || readMore.en) + '</a>';
+            }
+            L.popup({ maxWidth: 280 }).setLatLng(e.latlng).setContent(html).openOn(map);
+          });
+        }
+      }).addTo(map);
+    });
+})();
 </script>