fix: eliminate map tile seam lines with fill-antialias: false

Root cause: MapLibre GL's fill-antialias (default true) anti-aliases
polygon edges differently on each side of internal tile boundaries,
creating visible 1px horizontal seams on retina displays.

Fix: set fill-antialias: false on the choropleth fill layer.
Switched back to MapLibre GL with clicksports vector tiles.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

layouts/shortcodes/world-map.html

@@ -1,59 +1,46 @@
 {{ $lang := .Page.Language.Lang }}
 {{ $countries := hugo.Data.countries }}
 
+<link rel="stylesheet" href="{{ "css/maplibre-gl.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-map-container { position: relative; width: 100%; height: 420px; }
-.ifk-map-canvas { width: 100%; height: 100%; display: block; cursor: grab; image-rendering: auto; }
-.ifk-map-canvas:active { cursor: grabbing; }
-.ifk-map-controls { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 10; }
-.ifk-map-controls button { width: 30px; height: 30px; background: #fff; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #333; }
-.ifk-map-controls button:hover { background: #f0f0f0; }
-.ifk-map-popup { position: absolute; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.15); padding: 0.75rem; font-size: 0.85rem; max-width: 280px; line-height: 1.4; z-index: 20; pointer-events: auto; display: none; }
-.ifk-map-popup .popup-close { position: absolute; top: 4px; right: 8px; background: none; border: none; font-size: 16px; cursor: pointer; color: #999; }
-.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; }
-.ifk-popup-link { display: inline-block; margin-top: 0.4rem; font-size: 0.8rem; color: #667eea; text-decoration: none; font-weight: 600; }
-.ifk-popup-link:hover { text-decoration: underline; }
+#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); }
-@media (max-width: 640px) { .ifk-map-container { height: 280px; } }
+.maplibregl-popup-content { font-size: 0.85rem; max-width: 260px; line-height: 1.4; }
+.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; }
+.ifk-popup-link { display: inline-block; margin-top: 0.4rem; font-size: 0.8rem; color: #667eea; text-decoration: none; font-weight: 600; }
+.ifk-popup-link:hover { text-decoration: underline; }
+@media (max-width: 640px) { #ifk-world-map { height: 280px; } }
 </style>
 
 <div class="ifk-map-wrap">
   <h3>{{ if eq $lang "de" }}Interaktive Weltkarte: Kinderschutzgesetze{{ else if eq $lang "fr" }}Carte interactive : lois de protection de l'enfance{{ else }}Interactive Map: Child Protection Laws{{ end }}</h3>
   <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 class="ifk-map-container" id="ifk-map-container">
-    <canvas class="ifk-map-canvas" id="ifk-map-canvas"></canvas>
-    <div class="ifk-map-controls">
-      <button id="ifk-zoom-in" title="Zoom in">+</button>
-      <button id="ifk-zoom-out" title="Zoom out">&minus;</button>
-      <button id="ifk-zoom-reset" title="Reset"><svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 9H0v5h5v-2H2V9zm0-4h3V3H2V0H0v5zm10 7H9v2h5V9h-2v3zM9 0v2h3v3h2V0H9z" fill="currentColor"/></svg></button>
-    </div>
-    <div class="ifk-map-popup" id="ifk-map-popup"><button class="popup-close" id="ifk-popup-close">&times;</button><div id="ifk-popup-content"></div></div>
-  </div>
+  <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:#9cabf1"></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:#a68ac3"></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:#c5cefd"></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:#ebefff"></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:#667eea"></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:#764ba2"></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:#a5b4fc"></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:#e0e7ff"></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="{{ "js/maplibre-gl.min.js" | relURL }}"></script>
 <script src="{{ "js/topojson-client.min.js" | relURL }}"></script>
 <script>
 (function() {
   var LANG = "{{ $lang }}";
-  // Pre-blended with white at 0.65 opacity — no alpha = no seams between adjacent polygons
-  var STATUS_COLORS = { enforced: '#9cabf1', passed: '#a68ac3', progress: '#c5cefd', guidelines: '#ebefff' };
+  var STATUS_COLORS = { enforced: '#667eea', passed: '#764ba2', progress: '#a5b4fc', guidelines: '#e0e7ff' };
   var STATUS_LABELS = {
     en: { enforced: 'Enforced', passed: 'Passed', progress: 'In Progress', guidelines: 'Guidelines' },
     de: { enforced: 'In Kraft', passed: 'Verabschiedet', progress: 'In Bearbeitung', guidelines: 'Richtlinien' },
@@ -67,266 +54,96 @@
   var byIsoNum = {};
   countries.forEach(function(c) { byIsoNum[c.isoNum] = c; });
 
-  var W = 960, H = 480;
-  var canvas = document.getElementById('ifk-map-canvas');
-  var container = document.getElementById('ifk-map-container');
-  var popup = document.getElementById('ifk-map-popup');
-  var popupContent = document.getElementById('ifk-popup-content');
-  var dpr = window.devicePixelRatio || 1;
-
-  // ViewBox state
-  var vb = { x: 0, y: 0, w: W, h: H };
-  var VB_INIT = { x: 0, y: 0, w: W, h: H };
-  var MIN_W = W / 16;
-
-  // Sizing: match exact device pixels to prevent GPU scaling
-  function sizeCanvas() {
-    var rect = container.getBoundingClientRect();
-    canvas.width = Math.round(rect.width * dpr);
-    canvas.height = Math.round(rect.height * dpr);
-    canvas.style.width = rect.width + 'px';
-    canvas.style.height = rect.height + 'px';
-  }
-
-  function projectCoord(lon, lat) {
-    return [(lon + 180) * (W / 360), (90 - lat) * (H / 180)];
-  }
-
-  // Pre-computed paths for hit testing
-  var countryPaths = [];
-  var geoData = null;
-
-  function drawMap() {
-    var ctx = canvas.getContext('2d', { willReadFrequently: true });
-    var cw = canvas.width, ch = canvas.height;
-    // Transform from viewBox to canvas
-    var sx = cw / vb.w, sy = ch / vb.h;
-
-    ctx.clearRect(0, 0, cw, ch);
-
-    // Ocean background
-    ctx.fillStyle = '#c8d3df';
-    ctx.fillRect(0, 0, cw, ch);
-
-    if (!geoData) return;
-
-    // Pass 1: draw ALL countries as white in a single path (eliminates inter-polygon seams)
-    ctx.fillStyle = '#ffffff';
-    ctx.beginPath();
-    geoData.features.forEach(function(f) {
-      var geom = f.geometry;
-      if (geom.type === 'Polygon') {
-        geom.coordinates.forEach(function(ring) { traceRing(ctx, ring, sx, sy); });
-      } else if (geom.type === 'MultiPolygon') {
-        geom.coordinates.forEach(function(poly) {
-          poly.forEach(function(ring) { traceRing(ctx, ring, sx, sy); });
-        });
-      }
-    });
-    ctx.fill('nonzero');
-
-    // Pass 2: overdraw colored countries only
-    geoData.features.forEach(function(f) {
-      var id = String(f.id).padStart(3, '0');
-      var c = byIsoNum[id];
-      if (!c) return; // skip no-data (already white)
-      ctx.fillStyle = STATUS_COLORS[c.status];
-      drawGeometry(ctx, f.geometry, sx, sy, true);
+  // EXACT same config as held.de (no lines there)
+  var map = new maplibregl.Map({
+    container: 'ifk-world-map',
+    center: [20, 20],
+    zoom: 2,
+    style: 'https://maps.clicksports.de/styles/klokantech-basic/style.json'
   });
 
-    // Draw borders
-    ctx.strokeStyle = '#94a3b8';
-    ctx.lineWidth = 0.5 * sx / (cw / vb.w);
-    drawGeometry(ctx, geoData.borders, sx, sy, false);
-  }
-
-  function drawGeometry(ctx, geom, sx, sy, fill) {
-    ctx.beginPath();
-    var coords;
-    if (geom.type === 'Polygon') {
-      geom.coordinates.forEach(function(ring) { traceRing(ctx, ring, sx, sy); });
-    } else if (geom.type === 'MultiPolygon') {
-      geom.coordinates.forEach(function(poly) {
-        poly.forEach(function(ring) { traceRing(ctx, ring, sx, sy); });
+  map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
+  map.addControl(new maplibregl.FullscreenControl(), 'top-right');
+  document.addEventListener('fullscreenchange', function() {
+    if (document.fullscreenElement) map.scrollZoom.enable();
+    else map.scrollZoom.disable();
   });
-    } else if (geom.type === 'MultiLineString') {
-      geom.coordinates.forEach(function(line) { traceLine(ctx, line, sx, sy); });
-    } else if (geom.type === 'LineString') {
-      traceLine(ctx, geom.coordinates, sx, sy);
-    }
-    if (fill) ctx.fill('nonzero');
-    else ctx.stroke();
-  }
 
-  function traceRing(ctx, ring, sx, sy) {
-    for (var i = 0; i < ring.length; i++) {
-      var p = projectCoord(ring[i][0], ring[i][1]);
-      var x = (p[0] - vb.x) * sx;
-      var y = (p[1] - vb.y) * sy;
-      if (i === 0) ctx.moveTo(x, y);
-      else ctx.lineTo(x, y);
-    }
-    ctx.closePath();
-  }
-
-  function traceLine(ctx, line, sx, sy) {
-    for (var i = 0; i < line.length; i++) {
-      var p = projectCoord(line[i][0], line[i][1]);
-      var x = (p[0] - vb.x) * sx;
-      var y = (p[1] - vb.y) * sy;
-      if (i === 0) ctx.moveTo(x, y);
-      else ctx.lineTo(x, y);
-    }
-  }
-
-  // Load data
+  map.on('load', function() {
     fetch('{{ "data/countries-50m.json" | relURL }}')
       .then(function(r) { return r.json(); })
       .then(function(topo) {
         var geo = topojson.feature(topo, topo.objects.countries);
-      var borders = topojson.mesh(topo, topo.objects.countries, function(a, b) { return a !== b; });
-      var land = topojson.feature(topo, topo.objects.land);
-      var landGeom = land.features ? land.features[0].geometry : land.geometry;
 
-      geoData = { features: geo.features, borders: borders, land: landGeom };
-
-      // Pre-build hit-test data
         geo.features.forEach(function(f) {
           var id = String(f.id).padStart(3, '0');
           var c = byIsoNum[id];
-        if (c) countryPaths.push({ id: id, geometry: f.geometry, data: c });
+          f.properties.fillColor = c ? STATUS_COLORS[c.status] : '#e2e8f0';
+          f.properties.fillOpacity = c ? 0.65 : 0.15;
+          f.properties.isoNum = id;
         });
 
-      sizeCanvas();
-      drawMap();
-    });
+        map.addSource('countries', { type: 'geojson', data: geo });
 
-  // Resize handler
-  var resizeTimer;
-  window.addEventListener('resize', function() {
-    clearTimeout(resizeTimer);
-    resizeTimer = setTimeout(function() { sizeCanvas(); drawMap(); }, 100);
-  });
-
-  // Hit test: check if point is inside a country polygon
-  function hitTest(clientX, clientY) {
-    var rect = canvas.getBoundingClientRect();
-    var mx = clientX - rect.left;
-    var my = clientY - rect.top;
-    // Convert to map coords
-    var mapX = vb.x + (mx / rect.width) * vb.w;
-    var mapY = vb.y + (my / rect.height) * vb.h;
-    // Convert to lon/lat
-    var lon = (mapX / W) * 360 - 180;
-    var lat = 90 - (mapY / H) * 180;
-
-    // Use canvas isPointInPath for hit testing
-    var ctx = canvas.getContext('2d', { willReadFrequently: true });
-    var sx = canvas.width / vb.w, sy = canvas.height / vb.h;
-    for (var i = 0; i < countryPaths.length; i++) {
-      ctx.beginPath();
-      var geom = countryPaths[i].geometry;
-      if (geom.type === 'Polygon') {
-        geom.coordinates.forEach(function(ring) { traceRing(ctx, ring, sx, sy); });
-      } else if (geom.type === 'MultiPolygon') {
-        geom.coordinates.forEach(function(poly) {
-          poly.forEach(function(ring) { traceRing(ctx, ring, sx, sy); });
-        });
+        map.addLayer({
+          id: 'choropleth-fill',
+          type: 'fill',
+          source: 'countries',
+          paint: {
+            'fill-color': ['get', 'fillColor'],
+            'fill-opacity': ['get', 'fillOpacity'],
+            'fill-antialias': false
           }
-      if (ctx.isPointInPath(mx * dpr, my * dpr, 'evenodd')) {
-        return countryPaths[i];
-      }
-    }
-    return null;
-  }
-
-  // Hover cursor
-  canvas.addEventListener('mousemove', function(e) {
-    var hit = hitTest(e.clientX, e.clientY);
-    canvas.style.cursor = hit ? 'pointer' : 'grab';
         });
 
-  // Click handler
-  canvas.addEventListener('click', function(e) {
-    var hit = hitTest(e.clientX, e.clientY);
-    if (!hit) { popup.style.display = 'none'; return; }
-    var c = hit.data;
+        map.addLayer({
+          id: 'choropleth-border',
+          type: 'line',
+          source: 'countries',
+          paint: { 'line-color': '#94a3b8', 'line-width': 0.5 }
+        });
+
+        map.addLayer({
+          id: 'choropleth-hover',
+          type: 'fill',
+          source: 'countries',
+          paint: { 'fill-color': '#667eea', 'fill-opacity': 0.2 },
+          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', c ? ['==', 'isoNum', id] : ['==', 'isoNum', '']);
+        });
+        map.on('mouseleave', 'choropleth-fill', function() {
+          map.getCanvas().style.cursor = '';
+          map.setFilter('choropleth-hover', ['==', 'isoNum', '']);
+        });
+
+        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;
           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">\u{1F464} ' + ageLabel + ': <strong>' + c.ageLimitSocial + '+</strong></div>' +
+            '<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 \u2193', de: 'Weiterlesen \u2193', fr: 'En savoir plus \u2193' };
+            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>';
           }
-    popupContent.innerHTML = html;
-    var rect = container.getBoundingClientRect();
-    var px = e.clientX - rect.left;
-    var py = e.clientY - rect.top;
-    popup.style.display = 'block';
-    var pw = popup.offsetWidth, ph = popup.offsetHeight;
-    popup.style.left = Math.min(px + 10, rect.width - pw - 10) + 'px';
-    popup.style.top = Math.max(py - ph - 10, 10) + 'px';
+          popup.setLngLat(e.lngLat).setHTML(html).addTo(map);
         });
-
-  document.getElementById('ifk-popup-close').addEventListener('click', function(e) {
-    e.stopPropagation();
-    popup.style.display = 'none';
       });
-
-  // Zoom
-  function zoomBy(factor) {
-    var cx = vb.x + vb.w / 2, cy = vb.y + vb.h / 2;
-    var nw = Math.max(MIN_W, Math.min(VB_INIT.w, vb.w * factor));
-    var nh = nw * (H / W);
-    vb.w = nw; vb.h = nh;
-    vb.x = Math.max(0, Math.min(W - vb.w, cx - vb.w / 2));
-    vb.y = Math.max(0, Math.min(H - vb.h, cy - vb.h / 2));
-    drawMap();
-  }
-  document.getElementById('ifk-zoom-in').addEventListener('click', function() { zoomBy(0.5); });
-  document.getElementById('ifk-zoom-out').addEventListener('click', function() { zoomBy(2); });
-  document.getElementById('ifk-zoom-reset').addEventListener('click', function() {
-    vb = { x: 0, y: 0, w: W, h: H };
-    drawMap();
   });
-
-  // Pan
-  var dragging = false, dragStart = null;
-  canvas.addEventListener('mousedown', function(e) {
-    dragging = true;
-    dragStart = { x: e.clientX, y: e.clientY, vbx: vb.x, vby: vb.y };
-    e.preventDefault();
-  });
-  window.addEventListener('mousemove', function(e) {
-    if (!dragging) return;
-    var rect = canvas.getBoundingClientRect();
-    var scale = vb.w / rect.width;
-    vb.x = Math.max(0, Math.min(W - vb.w, dragStart.vbx - (e.clientX - dragStart.x) * scale));
-    vb.y = Math.max(0, Math.min(H - vb.h, dragStart.vby - (e.clientY - dragStart.y) * scale));
-    drawMap();
-  });
-  window.addEventListener('mouseup', function() { dragging = false; });
-
-  // Touch
-  canvas.addEventListener('touchstart', function(e) {
-    if (e.touches.length !== 1) return;
-    dragging = true;
-    dragStart = { x: e.touches[0].clientX, y: e.touches[0].clientY, vbx: vb.x, vby: vb.y };
-  }, { passive: true });
-  canvas.addEventListener('touchmove', function(e) {
-    if (!dragging || e.touches.length !== 1) return;
-    var rect = canvas.getBoundingClientRect();
-    var scale = vb.w / rect.width;
-    vb.x = Math.max(0, Math.min(W - vb.w, dragStart.vbx - (e.touches[0].clientX - dragStart.x) * scale));
-    vb.y = Math.max(0, Math.min(H - vb.h, dragStart.vby - (e.touches[0].clientY - dragStart.y) * scale));
-    drawMap();
-  }, { passive: true });
-  canvas.addEventListener('touchend', function() { dragging = false; }, { passive: true });
 })();
 </script>