From 955e4bef6f35610e6cffd6c40c586b37d1f05e37 Mon Sep 17 00:00:00 2001 From: Christian Gick Date: Sat, 4 Apr 2026 07:59:36 +0300 Subject: [PATCH] fix: remove map tile-seam lines + add interactive popups with law data MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Pre-blend fill colors over white background (opacity=1) to eliminate horizontal line artifacts at tile boundaries. Fix addTo(map) → addTo(window._ifkMap). Add hover highlight, age limit display, status badges, and article anchor links. Co-Authored-By: Claude Opus 4.6 (1M context) --- layouts/shortcodes/world-map.html | 58 ++++++++++++++++++++++++++----- 1 file changed, 49 insertions(+), 9 deletions(-) diff --git a/layouts/shortcodes/world-map.html b/layouts/shortcodes/world-map.html index 5f99bb8..41d7e28 100644 --- a/layouts/shortcodes/world-map.html +++ b/layouts/shortcodes/world-map.html @@ -13,8 +13,13 @@ } .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 { 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; } +.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; } } @@ -41,6 +46,9 @@ function ifkInitMap() { } 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' }, @@ -97,8 +105,7 @@ function ifkInitMap() { 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] : '#e2e8f0'; - f.properties.fillOpacity = c ? 0.65 : 0.15; + f.properties.fillColor = c ? FILL_COLORS[c.status] : NO_DATA_FILL; f.properties.isoNum = id; }); @@ -110,7 +117,7 @@ function ifkInitMap() { source: 'countries-choropleth', paint: { 'fill-color': ['get', 'fillColor'], - 'fill-opacity': ['get', 'fillOpacity'] + 'fill-opacity': 1 } }); @@ -126,28 +133,61 @@ function ifkInitMap() { 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; var c = byIsoNum[id]; if (!c) return; var loc = c[LANG] || c.en; var labels = STATUS_LABELS[LANG] || STATUS_LABELS.en; - popup.setLngLat(e.lngLat).setHTML( - '' + c.flag + ' ' + loc.name + '
' + + var ageLabel = AGE_LABELS[LANG] || AGE_LABELS.en; + var statusBg = STATUS_COLORS[c.status]; + var html = '' + c.flag + ' ' + loc.name + '
' + '' + loc.law + '
' + - '' + labels[c.status] + ' (' + c.year + ')
' + - loc.detail - ).addTo(map); + '' + labels[c.status] + ' (' + c.year + ')' + + '
👤 ' + ageLabel + ': ' + c.ageLimitSocial + '+
' + + '
' + loc.detail + '
'; + var anchor = ARTICLE_ANCHORS[c.iso3]; + if (anchor) { + var readMore = { en: 'Read more ↓', de: 'Weiterlesen ↓', fr: 'En savoir plus ↓' }; + html += '' + (readMore[LANG] || readMore.en) + ''; + } + popup.setLngLat(e.lngLat).setHTML(html).addTo(window._ifkMap); }); }); });