fix: isolate map in iframe to prevent Tailwind CSS tile seam artifacts

Hugo's Tailwind CSS reset (box-sizing: border-box on *) interferes with MapLibre GL's WebGL tile rendering, causing horizontal line artifacts on retina displays. The iframe provides complete CSS isolation. Map features: choropleth fills (fill-antialias: false), click popups with law details, hover highlights, zoom/pan, fullscreen, i18n. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-04 16:44:34 +03:00
parent 4724820873
commit b2306f7f3e
3 changed files with 225 additions and 9 deletions
--- a/static/map-embed.html
+++ b/static/map-embed.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="/css/maplibre-gl.min.css" />
+<style>
+body { margin: 0; overflow: hidden; }
+#map { width: 100%; height: 100vh; }
+.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; }
+</style>
+</head>
+<body>
+<div id="map"></div>
+<script src="/js/maplibre-gl.min.js"></script>
+<script src="/js/topojson-client.min.js"></script>
+<script>
+(function() {
+  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_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 byIsoNum = {};
+
+  var map = new maplibregl.Map({
+    container: 'map',
+    center: [20, 20],
+    zoom: 2,
+    scrollZoom: false,
+    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();
+  });
+
+  Promise.all([
+    fetch('/data/countries.json').then(function(r) { return r.json(); }),
+    fetch('/data/countries-50m.json').then(function(r) { return r.json(); })
+  ]).then(function(results) {
+    var countries = results[0];
+    var topo = results[1];
+
+    countries.forEach(function(c) { byIsoNum[c.isoNum] = c; });
+
+    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:' + POPUP_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 + '" target="_parent">' + (readMore[LANG] || readMore.en) + '</a>';
+      }
+      popup.setLngLat(e.lngLat).setHTML(html).addTo(map);
+    });
+  });
+})();
+</script>
+</body>
+</html>