<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Live Temperaturen in Europa (Canvas)</title>
<style>
body {
background-color: #f0f0f0;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
margin: 0;
}
canvas {
background-color: #ffffff;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<h1>Actuele Temperatuur in Europese Hoofdsteden (°C)</h1>
<canvas id="tempChart" width="800" height="500"></canvas>
<script>
const canvas = document.getElementById('tempChart');
const ctx = canvas.getContext('2d');
// Stap 1: Definieer de steden met hun coördinaten
const cities = [
{ name: 'Amsterdam', lat: 52.37, lon: 4.89 },
{ name: 'Athene', lat: 37.98, lon: 23.73 },
{ name: 'Berlijn', lat: 52.52, lon: 13.41 },
{ name: 'Lissabon', lat: 38.72, lon: -9.14 },
{ name: 'Londen', lat: 51.51, lon: -0.13 },
{ name: 'Madrid', lat: 40.42, lon: -3.70 },
{ name: 'Oslo', lat: 59.91, lon: 10.75 },
{ name: 'Parijs', lat: 48.85, lon: 2.35 },
{ name: 'Rome', lat: 41.90, lon: 12.50 },
];
// Functie om een laadbericht te tonen
function drawLoadingText() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#555';
ctx.textAlign = 'center';
ctx.font = '20px sans-serif';
ctx.fillText('Actuele temperaturen ophalen...', canvas.width / 2, canvas.height / 2);
}
// Stap 2: Functie om de weerdata op te halen
async function fetchWeatherData() {
console.log('Data ophalen...');
const requests = cities.map(city => {
const url = `https://api.open-meteo.com/v1/forecast?latitude=${city.lat}&longitude=${city.lon}¤t_weather=true`;
return fetch(url).then(response => response.json());
});
// Wacht tot alle verzoeken zijn afgerond
const results = await Promise.all(requests);
// Verwerk de resultaten naar het formaat dat onze grafiek nodig heeft
const tempData = results.map((data, index) => ({
city: cities[index].name,
temp: Math.round(data.current_weather.temperature) // Rond de temperatuur af
}));
console.log('Data succesvol opgehaald:', tempData);
return tempData;
}
// Stap 3: De animatie- en tekenfunctie (nu met data als parameter)
function animateChart(tempData) {
let animationProgress = 0;
const animationSpeed = 0.015;
const chartMargin = 50;
const chartWidth = canvas.width - 2 * chartMargin;
const chartHeight = canvas.height - 2 * chartMargin;
const barWidth = chartWidth / (tempData.length * 2);
const maxTemp = Math.max(...tempData.map(d => d.temp)) + 5;
const barColor = '#3498db';
const textColor = '#333';
const axisColor = '#555';
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Teken assen (code is hetzelfde als voorheen)
ctx.strokeStyle = axisColor;
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(chartMargin, chartMargin);
ctx.lineTo(chartMargin, chartHeight + chartMargin);
ctx.lineTo(chartWidth + chartMargin, chartHeight + chartMargin);
ctx.stroke();
tempData.forEach((data, index) => {
const barHeight = (data.temp / maxTemp) * chartHeight;
const x = chartMargin + (index * 2 + 0.5) * barWidth;
const animatedHeight = barHeight * animationProgress;
const y = chartHeight + chartMargin - animatedHeight;
ctx.fillStyle = barColor;
ctx.fillRect(x, y, barWidth, animatedHeight);
ctx.fillStyle = textColor;
ctx.textAlign = 'center';
ctx.font = '12px sans-serif';
ctx.fillText(data.city, x + barWidth / 2, chartHeight + chartMargin + 20);
if (animationProgress > 0.9) {
ctx.font = '14px sans-serif';
ctx.fillText(data.temp + '°', x + barWidth / 2, y - 10);
}
});
if (animationProgress < 1) {
animationProgress = Math.min(1, animationProgress + animationSpeed);
}
requestAnimationFrame(draw);
}
draw(); // Start de animatie-loop
}
// Stap 4: Hoofdfunctie die alles aanstuurt
async function initChart() {
drawLoadingText();
try {
const liveTempData = await fetchWeatherData();
animateChart(liveTempData);
} catch (error) {
console.error('Kon weerdata niet ophalen:', error);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillText('Fout bij het ophalen van data.', canvas.width / 2, canvas.height / 2);
}
}
// Start het hele proces!
initChart();
</script>
</body>
</html>