Description: Here is a weather API that can give you your location, current temperature, wind speed, humidity, pressure, low temperature and high temperature. To see my other API’s, click on the appropriate link on the menu.

Weather API

Current Weather Conditions in San Jose, California

Longitude:

Latitude:

Temperature:

Wind Speed:

Humidity:

Pressure:

Low Temperature:

High Temperature:

How It's Done

Authentication

Get your API key at https://home.openweathermap.org/users/sign_up. Once you sign up they will give you the code.
Next, visit https://openweathermap.org/api, and under “Current weather data,” click on “API doc.” Here you will find all the API calls and parameters for this API.

For your html page, start with this:

Adding your HTML code

1. Begin with this HTML at the top of your page.

2. Change what is between the h1 tags to the name of the city you want to use.

<html>
<meta charset=”UTF-8″>
<head>
<title>Weather API</title>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
</head>
<body>
<h1>Current Weather Conditions in San Jose, California</h1>

Adding JavaScript

3. Put a script tag and then this code.
4. Replace the red text (below) with the zip code for your city and add the API Key that was given to you.

var settings = {
“async”: true,
“crossDomain”: true,
“url”: “https://api.openweathermap.org/data/2.5/weather?zip={Zip Code}&appid={API Key}&units=imperial”,
“method”: “GET”,
}

5. Add the end script tag.

Back to HTML

Add the HTML below. This makes it possible to display the output to the screen.

$.ajax(settings).done(function (response) {
console.log(response);
$(“#mainTemp”).append(response.main.temp);
$(“#windSpeed”).append(response.wind.speed);
$(“#humidity”).append(response.main.humidity);
$(“#pressure”).append(response.main.pressure);
$(“#tempMin”).append(response.main.temp_min);
$(“#tempMax”).append(response.main.temp_max);

var dt = eval(response.dt * 1000);
var myDate = new Date(dt);
$(“#time”).append(myDate.toLocaleString());
});

The parameters can be inserted into the line:

$(“#tempMax”).append(response.main.temp_max);

6. Replace main.temp_max with the parameter you want. For instance, you could use response.wind.speed to get the wind speed from the API. For each additional parameter you want to add, copy that line of code and paste it below with another parameter. (See the example after this chart.)

Parameters

Description

main.temp

This is the current temperature.

main.pressure

The barometric pressure in millibars (mbar).

main.humidity

the current humidity.

main.temp_min

The lowest temperature it will be today (12:01 am-11:59 pm).

main.temp_max

The highest temperature it will be today (12:01 am-11:59 pm).

wind.speed

Wind speed in miles per hour.

coord.lat

Geographical lattitude

coord.lon

Geographical longitude

7. At the end of your parameter code, add the ending tag and now put in this piece of code:

<div id = “mainTemp“>Temperature: </div>

You may have several of these lines where “mainTemp” is replaced by “windSpeed” or other labels you gave your parameters. Don’t forget to change Temperature to Wind Speed or High Temperature or whatever else you want to name the results so that it may look like this:

<div id = “lon”>Longitude: </div>
<div id = “lat”>Latitude: </div>
<div id = “mainTemp”>Temperature: </div>
<div id = “windSpeed”>Wind Speed: </div>
<div id = “humidity”>Humidity: </div>
<div id = “pressure”>Pressure: </div>

8. End your page with this:

</body>
</html>

Finished product

When you are done, your code should look something like this. This is the code I used, but more parameters are available to you.

<html>
<meta charset=”UTF-8″>

<head>
<title>Weather API</title>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
</head>
<body>
<h1>Current Weather Conditions in San Jose, California</h2>

<script>

var settings = {
“async”: true,
“crossDomain”: true,
“url”: “https://api.openweathermap.org/data/2.5/weather?zip=95050&appid=3a155137ad9e4c7c3b5ac6abd7957c7a&units=imperial”,
“method”: “GET”,
}

$.ajax(settings).done(function(response) {
console.log(response);

$(“#lon”).append(response.coord.lon);
$(“#lat”).append(response.coord.lat);
$(“#mainTemp”).append(response.main.temp);
$(“#windSpeed”).append(response.wind.speed);
$(“#humidity”).append(response.main.humidity);
$(“#pressure”).append(response.main.pressure);
$(“#tempMin”).append(response.main.temp_min);
$(“#tempMax”).append(response.main.temp_max);

var dt = eval(response.dt * 1000);
var myDate = new Date(dt);
$(“#time”).append(myDate.toLocaleString());
});

</script>

<div id = “lon”>Longitude: </div>
<div id = “lat”>Latitude: </div>
<div id = “mainTemp”>Temperature: </div>
<div id = “windSpeed”>Wind Speed: </div>
<div id = “humidity”>Humidity: </div>
<div id = “pressure”>Pressure: </div>
<div id = “tempMin”>Low Temperature: </div>
<div id = “tempMax”>High Temperature: </div>

</body>
</html>

And with that you can have local weather conditions displayed on your website! Don’t forget to check out my other tutorials.

Thanks to Matt Abbott, who showed me how I could call the API once for all the data, rather than send a separate query for each piece.

Aaron K. Redshaw