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 + ')' +
+ '