fix: final map implementation — iframe + style.json + fill-antialias:false
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 11s
Deploy Internet for Kids / Deploy (push) Successful in 6s
Deploy Internet for Kids / Health Check (push) Successful in 1s
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Deploy Internet for Kids / IndexNow Ping (push) Successful in 7s
Deploy Internet for Kids / Promote to Latest (push) Successful in 2s
Deploy Internet for Kids / Rollback (push) Has been skipped
Deploy Internet for Kids / Audit (push) Successful in 1s

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>
This commit is contained in:
Christian Gick
2026-04-04 16:59:57 +03:00
parent b2306f7f3e
commit e93f5593e2
3 changed files with 9 additions and 131 deletions

View File

@@ -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];