Weather
This example showcases an interactive weather map of European capital cities using the Smartmaps API. The application displays current temperatures for 26 major European capitals, presenting the data in rectangular labels overlaid on the map. Users can view a comprehensive overview of temperatures across Europe at a glance, with each city's name and temperature clearly visible in a compact, easy-to-read format. The weather icons are mapped to local weather svg files.
<!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.52, lng: 13.405 },
{ name: 'Bern', lat: 46.948, 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.437, 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.815, 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=${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>