OpenWeatherMap Jquery Plugin

Getting the weather has never been easier

0 Comments

OpenWeatherMap.org is a great site that offers an API you can use to access weather conditions from around the world. This is a huge asset for sites that want to embed weather conditions based on the customers location (exact and estimate) or for a company that wants to share the conditions in their location (Think hospitality/tourism).

The API it self is pretty straight forward, but this wrapper allows you to use a custom object that offers a couple of key improvements.

Where can I get it

The plugin will be housed on github, I am open for contributions if you would like to make them. The instructions on how to use it can be found on the read me as well as the few requirements to use it.

Does it provide Icons for the weather?

OpenWeatherMap provides its own icon set that you can use, however they are very stock and are likely not to be what you will want to use. You can always utilize a font made by another dev. This set is extremely nice and easy to use. OpenWeatherMap Font

Usage Example:

$.OpenWeatherMap({
  "q":"Orlando, FL",
  "units":"imperial"
}).done(function(data) {
  var time = ( data.isDay ) ? "-d" : "-n";
  $("#weather").attr("title", data.weather[0].main);
  $("#weather span").html(Math.round(data.main.temp)+"°");
  $("#weather i").addClass("owf-"+data.weather[0].id+time);
});

In this example I am getting the weather for “Orlando, Florida, USA” and using the returned data to populate a particular webpage. If you notice the plugin allows you to use the familiar .done(), .fail() and .always() commands to do things after the call completes. This keeps the calls asynchronous and allows your page to continue on with out delay.

Limitations

Keeping in mind HTTPS is only available if you subscribe to the OpenWeatherMap.org Pro account, if you are running a site on HTTPS you will not be able to use the service.

- By: Last Updated:

Comments

Small ad here
Select a size at which to preview the size