e5ee29f1a9
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 10s
Deploy Internet for Kids / Deploy (push) Successful in 7s
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 1s
Deploy Internet for Kids / Rollback (push) Has been skipped
Deploy Internet for Kids / Audit (push) Successful in 2s
Same attribution pattern as held.de and other clicksports maps customers. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
237 lines
11 KiB
HTML
237 lines
11 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-ctrl-attrib { display: none !important; }
|
|
.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>
|
|
<a href="https://clicksports.de/clicksports-maps" target="_blank" rel="noopener" style="position:fixed;bottom:4px;right:4px;font-size:9px;color:#666;text-decoration:none;z-index:10;opacity:0.7">CLICKSPORTS Maps</a>
|
|
<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) {}
|
|
|
|
// Enforced = darkest, Guidelines = lightest
|
|
var STATUS_COLORS = { enforced: '#4a5ec7', passed: '#764ba2', progress: '#8b9cf0', guidelines: '#c5cefd' };
|
|
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: [30, 30],
|
|
zoom: 2.2,
|
|
scrollZoom: false,
|
|
fadeDuration: 0,
|
|
maxZoom: 4,
|
|
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() {
|
|
// White land, gray sea
|
|
_ifkMap.setPaintProperty('background', 'background-color', '#ffffff');
|
|
try { _ifkMap.setPaintProperty('water', 'fill-color', '#c8d3df'); } catch(e) {}
|
|
// Clean map: white land, no roads, no city labels — only country names + borders
|
|
_ifkMap.getStyle().layers.forEach(function(l) {
|
|
if (l.id.includes('land') && l.type === 'fill') _ifkMap.setPaintProperty(l.id, 'fill-color', '#ffffff');
|
|
// Hide roads/transport
|
|
if (l.type === 'line' && (l.id.includes('road') || l.id.includes('rail') || l.id.includes('transit') || l.id.includes('tunnel') || l.id.includes('bridge') || l.id.includes('transport') || l.id.includes('highway') || l.id.includes('path') || l.id.includes('aeroway'))) {
|
|
try { _ifkMap.setLayoutProperty(l.id, 'visibility', 'none'); } catch(e) {}
|
|
}
|
|
// Hide all symbol layers except country labels (show at zoom 3+)
|
|
if (l.type === 'symbol') {
|
|
if (l.id.includes('country')) {
|
|
try { _ifkMap.setLayerZoomRange(l.id, 3, 24); } catch(e) {}
|
|
} else {
|
|
try { _ifkMap.setLayoutProperty(l.id, 'visibility', 'none'); } catch(e) {}
|
|
}
|
|
}
|
|
});
|
|
|
|
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 as image overlay — re-renders at high res for visible area
|
|
var MAX_LAT = 85.051129;
|
|
var offscreen = document.createElement('canvas');
|
|
var dpr = window.devicePixelRatio || 1;
|
|
|
|
function mercY(lat, north, south, H) {
|
|
var toMerc = function(l) { var r = l * Math.PI / 180; return Math.log(Math.tan(Math.PI/4 + r/2)); };
|
|
var mTop = toMerc(north), mBot = toMerc(south);
|
|
return (toMerc(north) - toMerc(lat)) / (mTop - mBot) * H;
|
|
}
|
|
|
|
function renderChoropleth() {
|
|
var bounds = _ifkMap.getBounds();
|
|
var west = Math.max(-180, bounds.getWest());
|
|
var east = Math.min(180, bounds.getEast());
|
|
var south = Math.max(-MAX_LAT, bounds.getSouth());
|
|
var north = Math.min(MAX_LAT, bounds.getNorth());
|
|
// Large padding so small pans don't trigger re-render
|
|
var lonPad = (east - west) * 0.5;
|
|
var latPad = (north - south) * 0.5;
|
|
west = Math.max(-180, west - lonPad);
|
|
east = Math.min(180, east + lonPad);
|
|
south = Math.max(-MAX_LAT, south - latPad);
|
|
north = Math.min(MAX_LAT, north + latPad);
|
|
|
|
var container = _ifkMap.getContainer();
|
|
var W = Math.round(container.clientWidth * dpr);
|
|
var H = Math.round(container.clientHeight * dpr);
|
|
offscreen.width = W; offscreen.height = H;
|
|
var ctx = offscreen.getContext('2d');
|
|
ctx.clearRect(0, 0, W, H);
|
|
|
|
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 lon = ring[i][0], lat = Math.max(-MAX_LAT, Math.min(MAX_LAT, ring[i][1]));
|
|
var x = (lon - west) / (east - west) * W;
|
|
var y = mercY(lat, north, south, H);
|
|
if (i === 0) ctx.moveTo(x, y);
|
|
else ctx.lineTo(x, y);
|
|
}
|
|
ctx.closePath();
|
|
});
|
|
});
|
|
ctx.fill();
|
|
});
|
|
|
|
var url = offscreen.toDataURL('image/png');
|
|
var coords = [[west, north], [east, north], [east, south], [west, south]];
|
|
lastBounds = [west, north, east, south];
|
|
|
|
if (_ifkMap.getSource('choropleth-img')) {
|
|
_ifkMap.getSource('choropleth-img').updateImage({ url: url, coordinates: coords });
|
|
} else {
|
|
_ifkMap.addSource('choropleth-img', { type: 'image', url: url, coordinates: coords });
|
|
// Find first label/symbol layer to insert choropleth below it
|
|
var firstLabel = null;
|
|
_ifkMap.getStyle().layers.forEach(function(l) {
|
|
if (!firstLabel && (l.type === 'symbol')) firstLabel = l.id;
|
|
});
|
|
_ifkMap.addLayer({
|
|
id: 'choropleth-fill', type: 'raster', source: 'choropleth-img',
|
|
paint: { 'raster-opacity': 0.85, 'raster-fade-duration': 0 }
|
|
}, firstLabel);
|
|
}
|
|
}
|
|
|
|
var lastBounds = null;
|
|
function needsRerender() {
|
|
if (!lastBounds) return true;
|
|
var b = _ifkMap.getBounds();
|
|
// Only re-render if viewport moved >30% outside last rendered area
|
|
var threshold = 0.3;
|
|
var lw = lastBounds[2] - lastBounds[0], lh = lastBounds[1] - lastBounds[3];
|
|
return b.getWest() < lastBounds[0] + lw * threshold ||
|
|
b.getEast() > lastBounds[2] - lw * threshold ||
|
|
b.getNorth() > lastBounds[1] - lh * threshold ||
|
|
b.getSouth() < lastBounds[3] + lh * threshold;
|
|
}
|
|
renderChoropleth();
|
|
_ifkMap.on('moveend', function() { if (needsRerender()) renderChoropleth(); });
|
|
|
|
// Invisible GeoJSON layer for hover/click interaction
|
|
_ifkMap.addSource('countries', { type: 'geojson', data: geo });
|
|
_ifkMap.addLayer({
|
|
id: 'countries-interaction', type: 'fill', source: 'countries',
|
|
paint: { 'fill-color': '#000000', 'fill-opacity': 0, 'fill-antialias': false }
|
|
});
|
|
_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', 'countries-interaction', 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', 'countries-interaction', function() {
|
|
_ifkMap.getCanvas().style.cursor = '';
|
|
_ifkMap.setFilter('choropleth-hover', ['==', 'isoNum', '']);
|
|
});
|
|
|
|
_ifkMap.on('click', 'countries-interaction', 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>
|