Weather
Dieses Beispiel zeigt eine interaktive Wetterkarte europäischer Hauptstädte mit der SmartMaps API. Die Anwendung stellt die aktuellen Temperaturen für 26 wichtige europäische Hauptstädte dar und zeigt die Daten in rechteckigen Beschriftungen über der Karte an. Nutzer erhalten so auf einen Blick einen umfassenden Überblick über die Temperaturen in Europa, wobei Name und Temperatur jeder Stadt kompakt und gut lesbar dargestellt sind. Die Wettersymbole werden lokalen Wetter-SVG-Dateien zugeordnet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.smartmaps.cloud/packages/smartmaps/smartmaps-gl/v2/umd/smartmaps-gl.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
#loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.8);
padding: 10px;
border-radius: 5px;
display: none;
z-index: 999;
}
.city-label {
width: 110px;
height: 50px;
background: rgba(255, 255, 255);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.23);
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
font-family: 'Noto Sans', sans-serif;
font-weight: bold;
font-size: 12px;
padding: 5px;
pointer-events: none;
}
.weather-icon {
width: 32px;
height: 32px;
margin-right: 5px;
}
.city-info {
display: flex;
flex-direction: column;
align-items: flex-start;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="loading">Loading...</div>
<script>
const apiKey = '[INSERT API-KEY]';
const map = new smartmapsgl.Map({
apiKey,
container: "map",
center: { lat: 50.0, lng: 10.0 },
zoom: 4,
style: smartmapsgl.MapStyle.AUTO
});
const capitals = [
{ name: "YellowMap", lat: 49.0069, lng: 8.4037 },
{ name: "Amsterdam", lat: 52.3676, lng: 4.9041 },
{ name: "Athens", lat: 37.9838, lng: 23.7275 },
{ name: "Belgrade", lat: 44.7866, lng: 20.4489 },
{ name: "Berlin", lat: 52.5200, lng: 13.4050 },
{ name: "Bern", lat: 46.9480, lng: 7.4474 },
{ name: "Brussels", lat: 50.8503, lng: 4.3517 },
{ name: "Bucharest", lat: 44.4268, lng: 26.1025 },
{ name: "Budapest", lat: 47.4979, lng: 19.0402 },
{ name: "Copenhagen", lat: 55.6761, lng: 12.5683 },
{ name: "Dublin", lat: 53.3498, lng: -6.2603 },
{ name: "Helsinki", lat: 60.1699, lng: 24.9384 },
{ name: "Lisbon", lat: 38.7223, lng: -9.1393 },
{ name: "London", lat: 51.5074, lng: -0.1278 },
{ name: "Madrid", lat: 40.4168, lng: -3.7038 },
{ name: "Oslo", lat: 59.9139, lng: 10.7522 },
{ name: "Paris", lat: 48.8566, lng: 2.3522 },
{ name: "Prague", lat: 50.0755, lng: 14.4378 },
{ name: "Riga", lat: 56.9496, lng: 24.1052 },
{ name: "Rome", lat: 41.9028, lng: 12.4964 },
{ name: "Sofia", lat: 42.6977, lng: 23.3219 },
{ name: "Stockholm", lat: 59.3293, lng: 18.0686 },
{ name: "Tallinn", lat: 59.4370, lng: 24.7536 },
{ name: "Vienna", lat: 48.2082, lng: 16.3738 },
{ name: "Vilnius", lat: 54.6872, lng: 25.2797 },
{ name: "Warsaw", lat: 52.2297, lng: 21.0122 },
{ name: "Zagreb", lat: 45.8150, lng: 15.9819 }
];
const iconMapping = {
0: 'ic_day_sunny', // Clear
1: 'ic_day_sunny', // Mostly Clear
2: 'ic_day_partlycloudy', // Partly Cloudy
3: 'ic_day_cloudy', // Overcast
45: 'ic_day_fog', // Fog
48: 'ic_day_fog', // Icy Fog
51: 'ic_day_sprinkle', // Light Drizzle
53: 'ic_day_sprinkle', // Drizzle
55: 'ic_day_sprinkle', // Heavy Drizzle
80: 'ic_day_showers', // Light Showers
81: 'ic_day_showers', // Showers
82: 'ic_day_showers', // Heavy Showers
61: 'ic_day_rain', // Light Rain
63: 'ic_day_rain', // Rain
65: 'ic_day_rain', // Heavy Rain
56: 'ic_day_rain_mix', // Light Freezing Drizzle
57: 'ic_day_rain_mix', // Freezing Drizzle
66: 'ic_day_rain_mix', // Light Freezing Rain
67: 'ic_day_rain_mix', // Freezing Rain
71: 'ic_day_snow', // Light Snow
73: 'ic_day_snow', // Snow
75: 'ic_day_snow', // Heavy Snow
77: 'ic_day_snowflake_cold', // Snow Grains
85: 'ic_day_snow', // Light Snow Showers
86: 'ic_day_snow', // Snow Showers
95: 'ic_day_thunderstorm', // Thunderstorm
96: 'ic_day_storm_showers', // Light T-storm w/ Hail
99: 'ic_day_storm_showers' // T-storm w/ Hail
};
function getWeatherData(lat, lng) {
const url = `https://weather.smartmaps.cloud/api/v2/weather/point?Latitude=${lat}&Longitude=${lng}&ApiKey=${smartmapsgl.encodeString(apiKey)}`;
return fetch(url)
.then(response => response.json())
.then(data => {
if (data.features && data.features.length > 0) {
const currently = data.features[0].properties.currently;
return {
temp: currently.temperature2Meters,
icon: currently.weatherCode
};
}
throw new Error('No weather data available');
});
}
function addRectangles() {
document.getElementById('loading').style.display = 'block';
Promise.all(capitals.map(capital =>
getWeatherData(capital.lat, capital.lng)
.then(weather => ({ ...capital, ...weather }))
))
.then(capitalsWithWeather => {
capitalsWithWeather.forEach((capital, index) => {
const el = document.createElement('div');
el.className = 'city-label';
const localIcon = iconMapping[capital.icon] || 'ic_day_sunny';
el.innerHTML = `
<img src="/assets/images/weatherImages/${localIcon}.svg" class="weather-icon" alt="Weather icon">
<div class="city-info">
<span>${capital.name}</span>
<span>${capital.temp.toFixed(1)}°C</span>
</div>
`;
new smartmapsgl.Marker({
element: el,
anchor: 'center'
})
.setLngLat([capital.lng, capital.lat])
.addTo(map);
});
})
.catch(error => {
console.error('Error loading weather data:', error);
alert('Error loading weather data. Please try again later.');
})
.finally(() => {
document.getElementById('loading').style.display = 'none';
});
}
map.on('load', addRectangles);
</script>
</body>
</html>