fix: final map implementation — iframe + style.json + fill-antialias:false

Three-part fix for retina tile seam artifacts: 1. iframe isolation from Hugo Tailwind CSS (box-sizing interference) 2. Use tileserver style.json URL (not inline style — different layer configs) 3. fill-antialias: false on choropleth layer Shortcode is now a thin iframe wrapper. Map logic in static/map-embed.html. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-04 16:59:57 +03:00
parent b2306f7f3e
commit e93f5593e2
3 changed files with 9 additions and 131 deletions
--- a/.ip-exposure-whitelist
+++ b/.ip-exposure-whitelist
@@ -0,0 +1 @@
+127.05.131.05  # False positive in mermaid.min.js (numeric pattern, not IP)
--- a/layouts/shortcodes/world-map.html
+++ b/layouts/shortcodes/world-map.html
@@ -1,7 +1,5 @@
 {{ $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; }
@@ -13,12 +11,6 @@
 }
 .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; }
-.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>

@@ -27,124 +19,10 @@
  <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>
  <iframe id="ifk-world-map" src="{{ "map-embed.html" | relURL }}" loading="lazy" allow="fullscreen"></iframe>
  <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 base map at 0.65 — fully opaque, no transparency needed
-  var STATUS_COLORS = { enforced: '#9cabf1', passed: '#a68ac3', progress: '#c5cefd', guidelines: '#ebefff' };
-  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: '\u00c2ge min. r\u00e9seaux 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; });
-
-  // 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'
-  });
-
-  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();
-  });
-
-  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);
-
-        geo.features.forEach(function(f) {
-          var id = String(f.id).padStart(3, '0');
-          var c = byIsoNum[id];
-          f.properties.fillColor = c ? STATUS_COLORS[c.status] : 'transparent';
-          f.properties.fillOpacity = c ? 1 : 0;
-          f.properties.isoNum = id;
-        });
-
-        map.addSource('countries', { type: 'geojson', data: geo });
-
-        map.addLayer({
-          id: 'choropleth-fill',
-          type: 'fill',
-          source: 'countries',
-          paint: {
-            'fill-color': ['get', 'fillColor'],
-            'fill-opacity': ['get', 'fillOpacity'],
-            'fill-antialias': false
-          }
-        });
-
-        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">&#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>';
-          }
-          popup.setLngLat(e.lngLat).setHTML(html).addTo(map);
-        });
-      });
-  });
-})();
-</script>
--- a/static/map-embed.html
+++ b/static/map-embed.html
@@ -24,8 +24,7 @@ body { margin: 0; overflow: hidden; }
  var LANG = 'en';
  try { var m = parent.location.pathname.match(/^\/(de|fr|en)\//); if (m) LANG = m[1]; } catch(e) {}

-  var STATUS_COLORS = { enforced: '#9cabf1', passed: '#a68ac3', progress: '#c5cefd', guidelines: '#ebefff' };
-  var POPUP_COLORS = { enforced: '#667eea', passed: '#764ba2', progress: '#a5b4fc', guidelines: '#e0e7ff' };
+  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' },
@@ -65,8 +64,8 @@ body { margin: 0; overflow: hidden; }
    geo.features.forEach(function(f) {
      var id = String(f.id).padStart(3, '0');
      var c = byIsoNum[id];
-      f.properties.fillColor = c ? STATUS_COLORS[c.status] : 'transparent';
-      f.properties.fillOpacity = c ? 1 : 0;
+      f.properties.fillColor = c ? STATUS_COLORS[c.status] : '#dce4ec';
+      f.properties.fillOpacity = c ? 0.65 : 0.1;
      f.properties.isoNum = id;
    });

@@ -112,7 +111,7 @@ body { margin: 0; overflow: hidden; }
      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:' + POPUP_COLORS[c.status] + '">' + labels[c.status] + ' (' + c.year + ')</span>' +
+        '<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];
				`@@ -0,0 +1 @@`
				`127.05.131.05 # False positive in mermaid.min.js (numeric pattern, not IP)`