b1cc054df0
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 26s
Deploy Internet for Kids / Deploy (push) Successful in 6s
Deploy Internet for Kids / Health Check (push) Successful in 2s
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 2s
GeoJSON sources are internally tiled by geojson-vt, causing seams at tile boundaries during panning. Solution: pre-render the choropleth to a canvas, convert to PNG data URL, and add as a MapLibre image source. Single image = zero tiles = zero seams. GeoJSON source kept invisible for hover/click hit testing. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
162 lines
6.9 KiB
HTML
162 lines
6.9 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) {}
|
|
|
|
// Pre-blended with base map — fully opaque to prevent tile seam artifacts from transparency
|
|
var STATUS_COLORS = { enforced: '#9cabf1', passed: '#a68ac3', progress: '#c5cefd', guidelines: '#ebefff' };
|
|
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 = {};
|
|
|
|
window._ifkMap = new maplibregl.Map({
|
|
container: 'map',
|
|
center: [20, 20],
|
|
zoom: 2,
|
|
scrollZoom: false,
|
|
fadeDuration: 0,
|
|
style: 'https://maps.clicksports.de/styles/klokantech-basic/style.json'
|
|
});
|
|
_ifkMap.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
|
|
_ifkMap.addControl(new maplibregl.FullscreenControl(), 'top-right');
|
|
|
|
document.addEventListener('fullscreenchange', function() {
|
|
if (document.fullscreenElement) _ifkMap.scrollZoom.enable();
|
|
else _ifkMap.scrollZoom.disable();
|
|
});
|
|
|
|
_ifkMap.on('load', function() {
|
|
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;
|
|
});
|
|
|
|
// Render choropleth to a canvas, then add as single image source (NOT tiled)
|
|
var W = 2048, H = 1024;
|
|
var offscreen = document.createElement('canvas');
|
|
offscreen.width = W; offscreen.height = H;
|
|
var ctx = offscreen.getContext('2d');
|
|
|
|
// Draw country fills using Equirectangular projection
|
|
geo.features.forEach(function(f) {
|
|
var id = String(f.id).padStart(3, '0');
|
|
var c = byIsoNum[id];
|
|
if (!c) return;
|
|
ctx.fillStyle = STATUS_COLORS[c.status];
|
|
ctx.beginPath();
|
|
var coords = f.geometry.type === 'Polygon' ? [f.geometry.coordinates] : f.geometry.coordinates;
|
|
coords.forEach(function(poly) {
|
|
poly.forEach(function(ring) {
|
|
for (var i = 0; i < ring.length; i++) {
|
|
var x = (ring[i][0] + 180) / 360 * W;
|
|
var y = (90 - ring[i][1]) / 180 * H;
|
|
if (i === 0) ctx.moveTo(x, y);
|
|
else ctx.lineTo(x, y);
|
|
}
|
|
ctx.closePath();
|
|
});
|
|
});
|
|
ctx.fill();
|
|
});
|
|
|
|
// Add as image source — single image, NO tiling
|
|
_ifkMap.addSource('choropleth-img', {
|
|
type: 'image',
|
|
url: offscreen.toDataURL('image/png'),
|
|
coordinates: [[-180, 85.05], [180, 85.05], [180, -85.05], [-180, -85.05]]
|
|
});
|
|
_ifkMap.addLayer({
|
|
id: 'choropleth-fill',
|
|
type: 'raster',
|
|
source: 'choropleth-img',
|
|
paint: { 'raster-opacity': 0.85, 'raster-fade-duration': 0 }
|
|
});
|
|
|
|
// Keep GeoJSON source for hover/click interaction (invisible)
|
|
_ifkMap.addSource('countries', { type: 'geojson', data: geo });
|
|
_ifkMap.addLayer({
|
|
id: 'choropleth-hover', type: 'fill', source: 'countries',
|
|
paint: { 'fill-color': '#667eea', 'fill-opacity': 0.2, 'fill-antialias': false },
|
|
filter: ['==', 'isoNum', '']
|
|
});
|
|
|
|
var popup = new maplibregl.Popup({ closeButton: true, closeOnClick: false, maxWidth: '280px' });
|
|
|
|
_ifkMap.on('mousemove', 'choropleth-fill', function(e) {
|
|
var id = e.features[0].properties.isoNum;
|
|
var c = byIsoNum[id];
|
|
_ifkMap.getCanvas().style.cursor = c ? 'pointer' : '';
|
|
_ifkMap.setFilter('choropleth-hover', c ? ['==', 'isoNum', id] : ['==', 'isoNum', '']);
|
|
});
|
|
_ifkMap.on('mouseleave', 'choropleth-fill', function() {
|
|
_ifkMap.getCanvas().style.cursor = '';
|
|
_ifkMap.setFilter('choropleth-hover', ['==', 'isoNum', '']);
|
|
});
|
|
|
|
_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;
|
|
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(_ifkMap);
|
|
});
|
|
}).catch(function(e) { console.error('Choropleth load error:', e); });
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|