Today, there are many web services that businesses and developers use to fulfill their data needs. They obtain these web services from popular API marketplaces and use the data they provide to fulfill their data needs. Web services such as foreign exchange, IP geolocation, and web scraping are frequently used. While APIs like these are commonly used today, weather data is most frequently requested from external systems. Almost every business and developer today obtains data from a weather API for the weather dashboard that they present to their users.
Weather data has recently become important for almost every business today. With the increasing competition between businesses, weather data has become very important to attract customers. A weather dashboard that displays the current weather at the visitor’s location is a very effective step to increase user satisfaction today. Today, there are many APIs that provide weather data. In this article, we will introduce the most popular global weather API that processors and developers can choose from. Then, we will develop a current weather dashboard with this API in a web application.
Table of Contents
The weatherstack API: The Best Weather Data API
The weatherstack API is the best and most comprehensive global weather API on the market today. It provides live, accurate, and historical weather data for any location in the world in lightweight JSON format.
The weatherstack API is one of the most reliable APIs on the market. It presents the weather data obtained from the official weather stations to its users. It also supports millions of locations around the world. Therefore, this API can be used safely by both local businesses and global businesses.
This API has 5 API features that it offers to its users. These:
- Current Weather: The most up-to-date current weather data for millions of locations.
- Historical Weather: Historical data from millions of locations up to 2008.
- Historical Time-Series: Historical time series data of millions of locations.
- Weather Forecast: Future weather forecast data of millions of locations.
- Location Lookup: Millions of location data.
One of the most preferred features of the weatherstack API is current weather. With this feature, the weather conditions provided by that desired location contain very detailed data, such as wind speed, wind degree, pressure, and humidity.
Discover how to build an API-driven weather app using weatherstack API.
Finally, one of the most important features that put the weatherstack API ahead of its competitors is its pricing policy. It has one free and three paid plans. The free plan offers users free access to up to 1,000 API requests per month. Paid plans start at $9.99 per month for 50,000 API requests.
Create a Current Weather Data Dashboard in a Web App
In this part, we will develop a web application using the weatherstack API. In this web application, we will develop a weather dashboard using the current weather data endpoint of the weatherstack API.
Learn how to develop a global weather forecasting chatbot!
Before we start developing the application, we need an API key to use the weatherstack API. For this, let’s sign up for one of the affordable subscription plans it offers and get an API key.
Then, let’s open an HTML file in the file path we intend to develop the application and put the following codes in it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Dashboard</title>
<style>
*{
padding: 0px;
margin: 0px;
}
body
{
font-family: 'Roboto', sans-serif;
background: thistle;
}
.main{
width: 400px;
height: 200px;
margin: 150px auto;
background-color: #FFFFF0;
box-shadow: 0px 31px 35px -26px #080c21;
border-radius: 10px;
display: flex;
flex-direction: row;
}
.left{
margin-top: 20px;
padding: 15px;
}
.right{
margin-top: 54px;
margin-right: 5px;
margin-left: 25px;
}
.left-img{
width: 60px;
}
.right-img{
width: 180px;
border-radius: 20px;
}
.date{
font-size: 14px;
color: rgba(0,0,0,0.5);
font-weight: bold;
}
.city{
font-size: 21px;
color: rgba(0,0,0,0.7);
padding-top: 5px;
text-transform: uppercase;
font-weight: bold;
}
.temperature-section{
padding-top: 10px;
font-size: 61px;
color: rgba(0,0,0,0.9);
font-weight: 100;
}
.temperature{
font-size: 30px;
position: fixed;
padding-left: 12px;
padding-top: 9px;
}
.details {
font-size: 16px;
color: rgba(0, 0, 0, 0.7);
line-height: 1.5;
}
.details p span.bold-before-colon {
font-weight: bold;
}
</style>
</head>
<body>
<main class="main">
<div class="left">
<div id="date" class="date">
</div>
<div id="location" class="city"></div>
<div class="temperature-section">
<img id="weather-icon" alt="weather icon" class="left-img"/>
<span class="temperature" id="temperature"></span>
</div>
</div>
<div class="right">
<div class="details">
<p><span class="bold-before-colon" id="humidity-before">Humidity:</span> <span id="humidity"></span></p>
<p><span class="bold-before-colon" id="wind-before">Wind:</span> <span id="wind"></span></p>
<p><span class="bold-before-colon" id="pressure-before">Pressure:</span> <span id="pressure"></span></p>
<p><span class="bold-before-colon" id="uv-index-before">UV Index:</span> <span id="uv-index"></span></p>
</div>
</div>
</main>
<script>
// Weatherstack API URL
const apiUrl = "http://api.weatherstack.com/current?access_key=YOUR-API-KEY&query=New York";
// Fetch data from the API
fetch(apiUrl)
.then(response => response.json())
.then(data => {
console.log(data)
const current = data.current;
console.log(current.weather_icons[0])
// Update HTML elements with API data
document.getElementById("location").textContent = data.location.name;
document.getElementById("weather-icon").src = current.weather_icons[0];
document.getElementById("temperature").textContent = `${current.temperature}°C`;
document.getElementById("humidity").textContent = `Humidity: ${current.humidity}%`;
document.getElementById("wind").textContent = `Wind: ${current.wind_speed} m/s, ${current.wind_dir}`;
document.getElementById("pressure").textContent = `Pressure: ${current.pressure} hPa`;
document.getElementById("uv-index").textContent = `UV Index: ${current.uv_index}`;
// Format and update the date
const dateParts = data.location.localtime.split(' ')[0].split('-');
const formattedDate = `${dateParts[2]}/${dateParts[1]}/${dateParts[0]}`;
document.getElementById("date").textContent = formattedDate;
})
.catch(error => console.error("Error:", error));
</script>
</body>
</html>With this code, we designed a unique dashboard by obtaining the instant weather conditions of the New York location with the weatherstack API. The result we get when we run the application is as follows:
Conclusion
As a result, creating an impressive weather dashboard using a weather API is very popular and easy to implement these days. Using real-time data from the API, you can design a user-friendly interface and display weather icons and some important weather features. In this way, users can easily learn the current weather conditions of the desired location.
Try our best current weather data provider and offer your users a unique experience!
FAQs
Q: Is the weatherstack API a Free Weather API?
A: Yes, it is. The weatherstack API offers its users a free plan for up to 1,000 API calls per month.
Q: Can I Create Severe Weather Alerts with the weatherstack Weather API’s Data?
A: Yes, you can. You can create weather alerts thanks to the detailed data that the weatherstack API provides to its users.
Q: How Many Local Weather Models Does the weatherstack API Provide?
A: The weatherstack API has an extensive network of locations supporting millions of locations around the world.
Q: Does the weatherstack API Provide Weather Forecasts?
A: Yes, it does. It has a unique endpoint where it offers weather forecasts. Also, it can present hourly forecasts.
Read: How to Create a Great Weather Dashboard With a Weather API – Part 2 (Historical Weather)
Read: How to Create a Great Weather Dashboard With a Weather API – Part 3 (Weather Forecast)
