e93f5593e2
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>
129 lines
5.5 KiB
HTML
129 lines
5.5 KiB
HTML
<!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: '#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] : '#dce4ec';
|
|
f.properties.fillOpacity = c ? 0.65 : 0.1;
|
|
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">👤 ' + 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 ↓', de: 'Weiterlesen ↓', fr: 'En savoir plus ↓' };
|
|
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>
|