Skip to content

Instantly share code, notes, and snippets.

@marchawkins
Created March 9, 2014 08:17
Show Gist options
  • Save marchawkins/9444388 to your computer and use it in GitHub Desktop.
Save marchawkins/9444388 to your computer and use it in GitHub Desktop.
Use the OpenWeatherMap api to retrieve current weather conditions by providing an address or latitude and longitude. Uses the OpenWeatherMap API (http://openweathermap.org/) to get the data. Data is returned in JSON format. For this test, input an address and hit the "Get Weather" button. The current weather conditions will be shown in the texta…
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p><button class="btn btn-primary btn-sm" id="get-weather-btn"><span>Get Weather</span></button></p>
</div><!-- .col -->
<div class="col-md-10 col-sm-10 col-xs-10">
<div class="panel panel-default">
<div class="panel-heading">OpenWeatherMap API Response</div>
<div class="panel-body">
<p>Enter Address: <input type="text" id="address" class="form-control" placeholder="City, State"/></p>
<textarea id="weather" class="form-control"></textarea>
</div>
</div>
</div><!-- .col -->
</div><!-- .row -->
<script>
"use strict";
$(document).ready(function() {
// get weather button functionality
$("#get-weather-btn").click(function(event){
event.preventDefault();
var address = $("#address").val(); // get address from input field
if(address != '') {
$("#address").val("Retrieving weather..."); // write temporary response while we get the weather
$.getJSON( "http://api.openweathermap.org/data/2.5/weather?q="+encodeURIComponent(address)+"&units=imperial", function(data) { // add '&units=imperial' to get U.S. measurements
var currWeather = new Array(); // create array to hold our weather response data
currWeather['currTemp'] = Math.round(data.main.temp); // current temperature
currWeather['highTemp'] = Math.round(data.main.temp_max); // today's high temp
currWeather['lowTemp'] = Math.round(data.main.temp_min); // today's low temp
currWeather['humidity'] = Math.round(data.main.humidity); // humidity (in percent)
currWeather['pressure'] = data.main.pressure * 0.02961339710085; // barometric pressure (converting hPa to inches)
currWeather['pressure'] = currWeather['pressure'].toFixed(2); // barometric pressure (rounded to 2 decimals)
currWeather['description'] = data.weather[0].description; // short text description (ie. rain, sunny, etc.)
currWeather['icon'] = "http://openweathermap.org/img/w/"+data.weather[0].icon+".png"; // 50x50 pixel png icon
currWeather['cloudiness'] = data.clouds.all; // cloud cover (in percent)
currWeather['windSpeed'] = Math.round(data.wind.speed); // wind speed
currWeather['windDegree'] = data.wind.deg; // wind direction (in degrees)
currWeather['windCompass'] = Math.round((currWeather['windDegree'] -11.25) / 22.5); // wind direction (compass value)
// array of direction (compass) names
var windNames = new Array("North","North Northeast","Northeast","East Northeast","East","East Southeast", "Southeast", "South Southeast","South","South Southwest","Southwest","West Southwest","West","West Northwest","Northwest","North Northwest");
// array of abbreviated (compass) names
var windShortNames = new Array("N","NNE","NE","ENE","E","ESE", "SE", "SSE","S","SSW","SW","WSW","W","WNW","NW","NNW");
currWeather['windDirection'] = windNames[currWeather['windCompass']]; // convert degrees and find wind direction name
var response = "Current Weather: "+currWeather['currTemp']+"\xB0 and "+currWeather['description'];
if(currWeather['windSpeed']>0) { // if there's wind, add a wind description to the response
response = response+" with winds out of the "+windNames[currWeather['windCompass']]+" at "+currWeather['windSpeed']+" miles per hour";
}
$("#address").val(address); // write back address to field
$("#weather").text(response); // write weather response to textarea
console.log(data); // log weather data for reference (json format)
});
} else {
$("#address").val("You must enter an address."); // respond w/error if no address entered
}
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment