Real time geographical dynamic weather effects

The following code was written to display weather effects, depending on the real world weather forecast of the visitor’s location. Weather can have a profound effect on our mood, even if we don’t like to admit it. I found it fitting to take that potential mood as a variable in customizing the user experience on my website and so the idea was born.

An API call to open-meteo.com is made to get current weather upon which the weather data is stored in local storage to minimize the number of API calls. The weather data is only updated from the API if it is older than 30 minutes, a time which roughly corresponds to a prolonged use of the website, updates pushed by the weather service, and a period in which the weather actually changes enough to potentially display a different banner. The API used is free for up to 10k calls per day and requires no key. The API call requires latitude and longitude of the visitor, which is begotten through another API which gets the data through the visitor’s IP address, because I disliked having to prompt the visitor for their location. As such it may not be accurate for visitors who run a VPN, or are otherwise masking their IP address.

After retrieving and storing the weather data it is parsed to deduce the weather code and some other parameters, such as whether it is day or night, wind speed and direction, precipitation, and temperature. Currently I use the weather codes to decide which effects to apply. A weather code is a meteorological shorthand for the type of weather a region is experiencing, most common being rain, drizzle, fog, sunshine, storm, snowfall, and some other. I consolidate most of these codes into a few categories to keep the effects manageable, however, should one want to, expansion and granular weather representation is possible.

The weather effects themselves are CSS animations and different CSS properties applied to the weather container which serves as the main stage for displaying different weather states to the visitor. Inside the specified weather functions I further break down the weather and manipulate the animations depending on wind direction, wind speed, and the sunrise/sunset times. If the weather is clear and it is night time, for example, approximate moon position is calculated and displayed.

Inside the main weather banner, just below the header, is an overlay which becomes visible on hovering over it, which can toggle weather effects for those of you who prefer simplicity in design. This preference is stored in session storage and persists until the browser tab is closed. There is also a bit of code to adjust the weather banner depending on which page is viewed, zoom applied to the body of the page, and for mobile devices. There is also a bit of code to keep the button bar tight against the header, regardless of zoom or window size. Since all the animations are done in CSS, it is a light weight solution for my rig, and hopefully yours too. 

Also you may notice that I store the weather type in session storage. This is done to dynamically adapt other sections of the website depending on the type of weather. Currently my main shop category displays different descriptions depending on which weather is outside of your window. I have a blog post about adding shop category descriptions if you are interested. 

Lastly, I implemented fail safes for when the weather data is not available. There is a default weather mock up which is initiated if the API call returns bad data, or if the IP of the user can not be obtained. This ensures that even if the first API call fails, the weather is still displayed, although not in correspondence with the real time data.

HTML:

JAVASCRIPT:

<script>
document.addEventListener('DOMContentLoaded', function () {
const weatherUpdateInterval = 0.5 * 60 * 60 * 1000; //how often we can do api call
const sectionBG = document.querySelector('.section-background');
const weatherContainer = document.createElement('div');
weatherContainer.id = "weatherContainer";
weatherContainer.classList.add('weatherContainer');							
const weatherMainContainer = document.createElement('div');
weatherMainContainer.id = "weatherMainContainer";
weatherMainContainer.classList.add('weatherMainContainer');
weatherMainContainer.appendChild(weatherContainer);
sectionBG.appendChild(weatherMainContainer); //below the header
// Mobile check
const headerActions = document.querySelector('.header-actions');
let isTouch = false;
function checkHeader() {
const styles = window.getComputedStyle(headerActions);
isTouch = styles.getPropertyValue('display') !== 'flex';
}
checkHeader();
//to clear existing weather
function removeWeatherEffects(){
weatherContainer.classList.remove('rainy');
weatherContainer.classList.remove('windrainyright');
weatherContainer.classList.remove('windrainyleft');
weatherContainer.classList.remove('snowy');
weatherContainer.classList.remove('drizzly');
weatherContainer.classList.remove('cloudy');
weatherContainer.classList.remove('sunny');
weatherContainer.classList.remove('moony');
weatherContainer.classList.remove('foggy');
weatherContainer.classList.remove('stormy');
}
//adjust weather size per page
const shopString = '/shop';
const secretShopString = '/sanctumshop';
const productPageString = 'shop/p/';
const artString = '/art';
const loginString = '/login';
const signupString = '/signup';
const dossierString = '/accountdossier';
const cartPageString = '/cart';
const gallerySection = document.querySelector('.gallery-masonry');
const userGalleryString = '/usergallery';
const devlogString = '/developmentlog';
const devlogListString = '/devlog';
const getURL = window.location.href;  
function adjustWeatherContainer() {
const weatherType = sessionStorage.getItem('weatherType');
const zoomFactor = parseFloat(document.body.style.zoom) || 1;
if (weatherType !== 'sunny' && weatherType !== 'moony'){ //Exclude bad scaling weathers
if (getURL.includes(artString)) {
if (isTouch === false) {
weatherMainContainer.style.height = `${260 * zoomFactor}px`;
} else {
weatherMainContainer.style.height = `${200 * zoomFactor}px`;
}
} else if (getURL.includes(productPageString)) {
if (isTouch === false) {
weatherMainContainer.style.height = `${200 * zoomFactor}px`;
} else {
weatherMainContainer.style.display = 'none';
}
} else if (getURL.includes(shopString) || getURL.includes(secretShopString)) {
if (isTouch === false) {
weatherMainContainer.style.height = `${290 * zoomFactor}px`;
} else {
weatherMainContainer.style.height = `${550 * zoomFactor}px`;
}
} else if (getURL.includes(loginString) || getURL.includes(signupString) || getURL.includes(dossierString) || getURL.includes(cartPageString) || getURL.includes(userGalleryString)) {
weatherMainContainer.style.display = 'none';
} else if (!getURL.includes(artString) && gallerySection) {
weatherMainContainer.style.display = 'none';
} else if (getURL.includes(devlogString)){
if (isTouch === false) {
weatherMainContainer.style.height = `${247 * zoomFactor}px`;
} else {
weatherMainContainer.style.height = `${255 * zoomFactor}px`;
}
} else if (getURL.includes(devlogListString)){
if (isTouch === false) {
weatherMainContainer.style.height = `${280 * zoomFactor}px`;
} else {
weatherMainContainer.style.height = `${200 * zoomFactor}px`;
}
}
} else {
weatherMainContainer.style.height = `${270 * zoomFactor}px`;
}
}
//weather implementations
function convertToMinutes(timeString) {
const date = new Date(timeString);
const hours = date.getHours();
const minutes = date.getMinutes();
return hours * 60 + minutes;
}
function calculateMoonPosition() {
const storedWeatherData = localStorage.getItem('weatherData');
const weatherData = JSON.parse(storedWeatherData);
const sunriseTime = weatherData.sunrise;
const sunsetTime = weatherData.sunset;
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const totalMinutes = hours * 60 + minutes;
const nightStart = convertToMinutes(sunsetTime);
const nightEnd = convertToMinutes(sunriseTime);
if (totalMinutes >= nightStart || totalMinutes < nightEnd) {
let progress;
if (totalMinutes >= nightStart) {
progress = (totalMinutes - nightStart) / ((nightEnd + 24 * 60) - nightStart);
} else {
progress = ((totalMinutes + 24 * 60) - nightStart) / ((nightEnd + 24 * 60) - nightStart);
}
const animationDuration = 60; //duration of the css animation
const currentAnimationTime = progress * animationDuration;
weatherContainer.style.animationPlayState = 'paused';
weatherContainer.style.animationDelay = `-${currentAnimationTime}s`;
} else {
weatherContainer.style.animationPlayState = 'running';
}
}
function sunny() { //or moony
const storedWeatherData = localStorage.getItem('weatherData');
const weatherData = JSON.parse(storedWeatherData);
const weather = weatherData.weather;
const isDay = weather.is_day === 1;
removeWeatherEffects();
if (isDay === true) {
weatherContainer.classList.add('sunny');
sessionStorage.setItem('weatherType', 'sunny');
} else {
weatherContainer.classList.add('moony');
sessionStorage.setItem('weatherType', 'moony');
calculateMoonPosition();
setInterval(calculateMoonPosition, 60 * 1000);
}
}
function cloudy() {
const storedWeatherData = localStorage.getItem('weatherData');
const weatherData = JSON.parse(storedWeatherData);
const weather = weatherData.weather;
removeWeatherEffects();  
weatherContainer.classList.add('cloudy');
const winddirection = weather.winddirection;
const windspeed = weather.windspeed;
const newAnimationDuration = 120 / (windspeed / 8); //clouds speed
weatherContainer.style.animationDuration = `${newAnimationDuration}s`;
if (winddirection <= 180) {
weatherContainer.style.animationDirection = 'normal'; 
} else {
weatherContainer.style.animationDirection = 'reverse'; 
}
sessionStorage.setItem('weatherType', 'cloudy');
}
function fog() {
removeWeatherEffects();
weatherContainer.classList.add('foggy');
sessionStorage.setItem('weatherType', 'foggy');
}
function drizzle() {
removeWeatherEffects();
weatherContainer.classList.add('drizzly');
sessionStorage.setItem('weatherType', 'drizzly');
}
function rain() {
const storedWeatherData = localStorage.getItem('weatherData');
const weatherData = JSON.parse(storedWeatherData);
const weather = weatherData.weather;
const winddirection = weather.winddirection;
const windspeed = weather.windspeed;
removeWeatherEffects();
if (windspeed <= 15) {
weatherContainer.classList.add('rainy');
} else if (winddirection <= 180) {
weatherContainer.classList.add('windrainyleft');           
} else {
weatherContainer.classList.add('windrainyright'); 
}
sessionStorage.setItem('weatherType', 'rainy');
}
function snow() {
const storedWeatherData = localStorage.getItem('weatherData');
const weatherData = JSON.parse(storedWeatherData);
const weather = weatherData.weather;
removeWeatherEffects();
weatherContainer.classList.add('snowy');
const weatherCode = weather.weathercode;
const windspeed = weather.windspeed;
const newAnimationDuration = 33 / (windspeed / 8); //snowfall speed
weatherContainer.style.animationDuration = `${newAnimationDuration}s`;
sessionStorage.setItem('weatherType', 'snowy');
}
function thunderstorm() {
const storedWeatherData = localStorage.getItem('weatherData');
const weatherData = JSON.parse(storedWeatherData);
const weather = weatherData.weather;
removeWeatherEffects();
weatherContainer.classList.add('stormy');
const winddirection = weather.winddirection;
const windspeed = weather.windspeed;
const newAnimationDuration = 58 / (windspeed / 13); //stormcloud speed
weatherContainer.style.animationDuration = `${newAnimationDuration}s`;  
sessionStorage.setItem('weatherType', 'stormy');
}
//fallback if api not available
function defaultWeatherSystem() {
const weather = {
weather: {
time: "2024-09-27T22:00",
interval: 900,
temperature: 14.2,
windspeed: 18,
winddirection: 329,
is_day: 0,
weathercode: 0
},
sunrise: "2024-09-27T06:00",
sunset: "2024-09-27T21:00",
timestamp: Date.now()
};
const now = new Date();
const hours = now.getHours();
if (hours <= 5) {
rain(weather);
} else if (hours <= 9) {
drizzle();
} else if (hours <= 15) {
sunny(weather);
} else if (hours <= 18) {
fog(weather);
} else if (hours <= 21) {
thunderstorm(weather);
} else if (hours <= 22) {
cloudy(weather);
} else {
snow();
}
}
//choose weather type
function applyWeatherEffects() {
const storedWeatherData = localStorage.getItem('weatherData');
const weatherData = JSON.parse(storedWeatherData);
const weather = weatherData.weather;
const weatherCode = weather.weathercode;
if (weatherCode === 0 || weatherCode === 1) {
sunny();
} else if (weatherCode === 2 || weatherCode === 3) {
cloudy();
} else if (weatherCode === 45 || weatherCode === 48) {
fog();
} else if (weatherCode === 51 || weatherCode === 53 || weatherCode === 55 || weatherCode === 56 || weatherCode === 57) {
drizzle();
} else if (weatherCode === 61 || weatherCode === 63 || weatherCode === 65 || weatherCode === 66 || weatherCode === 67 || weatherCode === 80 || weatherCode === 81 || weatherCode === 82) {
rain();
} else if (weatherCode === 71 || weatherCode === 73 || weatherCode === 75 || weatherCode === 77 || weatherCode === 85 || weatherCode === 86) {
snow();
} else if (weatherCode === 95 || weatherCode === 96 || weatherCode === 99) {
thunderstorm();
} else {
sunny();
}
}
//get weather data by location  
function getWeatherData(latitude, longitude) {
const apiUrl = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true&daily=sunrise,sunset`;
//this link is not correct, look at the end of the post to copy and paste the correct API call constant
fetch(apiUrl)
.then(response => {
if (!response.ok) {
defaultWeatherSystem();
}
return response.json();
})
.then(data => {
const weather = data.current_weather;
const weatherCode = weather.weathercode;
const sunriseTime = data.daily.sunrise[0];
const sunsetTime = data.daily.sunset[0];
const weatherData = {
weather: weather,
sunrise: sunriseTime,
sunset: sunsetTime,
timestamp: Date.now()
};
localStorage.setItem('weatherData', JSON.stringify(weatherData));
applyWeatherEffects();
})
.catch(error => {
defaultWeatherSystem();
});
}
//get approximate location of the visitor 
function getLocationByIP() {
const defaultLatitude = 51.9966;
const defaultLongitude = 4.4682;
fetch('https://ipapi.co/json/')
.then(response => response.json())
.then(data => {
const latitude = data.latitude || defaultLatitude;
const longitude = data.longitude || defaultLongitude;
getWeatherData(latitude, longitude);
})
.catch(error => {
getWeatherData(defaultLatitude, defaultLongitude);
});
}
//check if we already have up to date weather data
function checkWeatherData() {
const storedWeatherData = localStorage.getItem('weatherData');
if (!storedWeatherData) {
return getLocationByIP();
}
const { weather, timestamp } = JSON.parse(storedWeatherData);
const currentTime = Date.now();
if (currentTime - timestamp < weatherUpdateInterval) {
return applyWeatherEffects(weather);
}
return getLocationByIP();
}
//bar button to toggle weather effects
let weatherOn = sessionStorage.getItem('weatherOn');
if (weatherOn === null) {
sessionStorage.setItem('weatherOn', true);
weatherOn = true;
} else {
weatherOn = weatherOn === 'true';
}
const weatherButton = document.createElement('div');
weatherButton.id = "weatherButton";
weatherButton.classList.add('weatherButton');
const weatherButtonContainer = document.createElement('div');
weatherButtonContainer.id = "weatherButtonContainer";
weatherButtonContainer.classList.add('weatherButtonContainer');
weatherButtonContainer.appendChild(weatherButton);
weatherMainContainer.appendChild(weatherButtonContainer);
weatherButton.innerHTML = 'Toggle Weather';
const header = document.querySelector('#header');
const headerHeight = header.offsetHeight;
weatherButton.style.top = `${headerHeight - 5}px`;
setTimeout(() => { //delayed execution on all calcs that involve zoom
const zoomFactor = parseFloat(document.body.style.zoom) || 1;
weatherButton.style.height = `${45 * zoomFactor * zoomFactor}px`;
}, 0);
weatherButton.addEventListener('click', function() {
if (weatherOn === false) {
sessionStorage.setItem('weatherOn', true);
weatherOn = true;
checkWeatherData();
adjustWeatherContainer();
} else {
sessionStorage.setItem('weatherOn', false);
weatherOn = false;
removeWeatherEffects();
}
});
//Initialize
if (weatherOn === true) {
removeWeatherEffects();
checkWeatherData(); 
setTimeout(() => {
adjustWeatherContainer();  
}, 0);
}
//exit  
});
</script>

CSS:

@keyframes sunshine {
0% {background-position: 180% -50%;}
10% {background-color: transparent;}
50% {background-position: 50% 50%; background-color: #ffffff; opacity: 0.75;}
90% {background-color: #cc0000;}
100% {background-position: -80% -50%;}
}
@keyframes snowfall {
0% {background-position: 0 0;}
25% {background-position: -1% 125px;}
50% {background-position: 0 250px;}
75% {background-position: 1% 375px;}
100% {background-position: 0 500px;} 
}
@keyframes rain {
0% { background-position: 0 0;}
100% { background-position: 0% 500px;}
}
@keyframes diagonalrainleft {
0% {background-position: 0 0;}
100% {background-position: -500px 500px;}
}
@keyframes diagonalrainright {
0% {background-position: 0 0;}
100% {background-position: 500px 500px;}
}
@keyframes clouds {
0% {background-position: 0px 25px;}            
50% {background-position: 1200px 15px;}             
100% {background-position: 2400px 25px;}      
}
@keyframes storm {
0% {background-position: 0px 25px;}
10.5% {background-color: transparent; opacity: 0.65;}
11% {background-color: #ffffff; opacity: 0.98;}
13% {background-color: transparent; opacity: 0.73;}
13.2% {background-color: #000000;}
13.5% {background-color: #ffec94; opacity: 0.98;}
16% {background-color: transparent; opacity: 0.73;}
50% {background-position: 1200px 15px;}
55.6% {background-color: transparent; opacity: 0.65;}
55.9% {background-color: #ffec94; opacity: 0.98;}
59% {background-color: transparent; opacity: 0.65;}
62% {background-position: 1500px 20px;}
66.7% {background-color: transparent; opacity: 0.73;}
67% {background-color: #ffffff; opacity: 0.98;}
71% {background-color: transparent; opacity: 0.73;}
91% {background-color: transparent; opacity: 0.73;}
91.2% {background-color: #000000;}
91.4% {background-color: #ffec94; opacity: 0.98;}
94% {background-color: transparent; opacity: 0.65;}
100% {background-position: 2400px 25px;}      
}
@keyframes moonwalk {
0% {background-position: 100% 100px; background-color: transparent; opacity: 0.5;}
35% {background-position: 65% 35px; opacity: 0.8;}
50% {background-position: 50% 25px; background-color: #000099; opacity: 0.9;}
65% {background-position: 35% 35px; opacity: 0.8;}
100% {background-position: 0% 100px;
background-color: transparent; opacity: 0.5;}
}


//WEATHER EFFECTS//
#weatherButtonContainer {
  position: absolute;
  max-width: 2200px;
  width: 100%;
  height: 100%;
}
#weatherButton {
  background: linear-gradient(180deg, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%);
  width: 60%;
  height: 45px;
  position: absolute;
  display: flex;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
  transition: all 1s ease;
  opacity: 0;
  color: var(--color1);
  text-align: center;
  padding: 8px;
  justify-content: center;
  align-items: center;
  letter-spacing: 2px;
  font-size: 16px;
  mask-image: linear-gradient(90deg, rgba(235,0,0,0) 4%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 96%);
  -webkit-mask-image: linear-gradient(90deg, rgba(235,0,0,0) 4%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 96%);
}
#weatherButton:hover {
  opacity: 0.45;
}
@media only screen and (max-width:790px) {
#weatherButton {
  width: 100%;
  }
}
#weatherMainContainer {
  position: absolute;
  pointer-events: none;
  display: flex;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 270px;
  z-index: 10;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}
#weatherContainer {
  max-width: 2200px;
  width: 100%;
  height: 100%;
  background-repeat: repeat;
  background-size: cover;
  mask-image: linear-gradient(90deg, rgba(235,0,0,0) 4%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 96%);
  -webkit-mask-image: linear-gradient(90deg, rgba(235,0,0,0) 4%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 96%);
}
#weatherContainer.snowy {
  animation: snowfall 33s linear infinite;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/8096f400-fe6f-41bc-9a56-002bd32b7300/snowPattern1.png');
  background-size: 500px 500px;
  opacity: 1;
}
#weatherContainer.rainy {
  animation: rain 1.73s linear infinite;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/6549860a-012c-4d07-8739-e18af61643bb/rainPattern1.png');
  background-size: 500px 500px;
  opacity: 0.3;
}
#weatherContainer.windrainyleft {
  animation: diagonalrainleft 1.6s linear infinite;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/6451eb03-ba92-4327-ae54-73eb5ff89cbe/diagRainLeft1.png');
  background-size: 500px 500px;
  opacity: 0.5;
}
#weatherContainer.windrainyright {
  animation: diagonalrainright 1.6s linear infinite;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/bbc8882a-bed7-45d4-a81f-7739258844a7/diagRainRight1.png');
  background-size: 500px 500px;
  opacity: 0.5;
}
#weatherContainer.drizzly {
  animation: rain 1.93s linear infinite;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/7c91a254-d1f9-425b-a4c8-c6094da5b02f/DrizzlePattern1+copy.png');
  background-size: 500px 500px;
  opacity: 0.3;
}
#weatherContainer.cloudy {
  animation: clouds 120s linear infinite reverse;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/16fc7e70-6d05-4a55-b869-a72a0ebdd463/CloudsHorizontalTile1.png');
  background-size: 2400px 300px;
  opacity: 0.73;
  filter: blur(2px);
}
#weatherContainer.stormy {
  animation: storm 58s linear infinite;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/16fc7e70-6d05-4a55-b869-a72a0ebdd463/CloudsHorizontalTile1.png');
  background-size: 2400px 320px;
  filter: blur(1px);
}
#weatherContainer.foggy {
  animation: clouds 200s linear infinite;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/16fc7e70-6d05-4a55-b869-a72a0ebdd463/CloudsHorizontalTile1.png');
  background-size: 3500px 300px;
  opacity: 0.5;
  filter: blur(15px);
  background-color: #ffffff;
}
#weatherContainer.sunny {
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 50%);
  animation: sunshine 50s infinite linear;
  opacity: 0.3;
  background-repeat: no-repeat;
  background-size: 50%;
}
#weatherContainer.moony {
  animation: moonwalk 60s infinite linear;
  background: radial-gradient(circle, rgba(255,232,153,1) 17%, rgba(255,224,99,0.7) 17.1%, rgba(0,0,0,0) 25%);
  background-repeat: no-repeat;
  background-size: 8%;
}

This should be a ready to copy and paste implementation provided you make the weather effect textures, however, I strongly encourage you to make adjustments to fit your website. Note that the line “const apiUrl = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true&daily=sunrise,sunset`;” is the correct api call constant. My automatic highlighting distorts this link in the code above.