EasyWeather v1.3.2

Many weather services, one bright engine

EasyWeather is a lightweight and versatile jQuery plugin displaying weather information for any location. Its compact size and numerous options make it perfectly suitable for providing local weather information in portals, websites, blogs and apps.

It is an amazing plugin that unifies different weather sources in one tiny widget. It currently works with 6 weather providers but it is designed to work with an unlimited number of sources. It implements a cascading fallback mechanism ensuring data is retrieved even if a provider is down or the consumer itself is throttled by a service. If the first provider fails to return the requested information, EasyWeather will contact the next one to maximise the availability of the service. EasyWeather's engine uses the same mechanism to detect users location and it currently supports 4 different geolocation services.

EasyWeather is available for purchase on CodeCanyon for only $8.

Main features

top ↑

Weather & geolocation providers

This is the list of supported weather data providers:

NameCodeRequires accountFree planThrottled by APINb of forecast daysLanguage support
Yahoo! Weatheryhwnoyesno4no
World Weather Onlinewwoyesyesyes5no
Open Weather Mapowmyesyesyes7yes
Forecast.iofioyesyes (free first 1000
API calls/day)

And below the list of geolocation providers:

NameCodeRequires accountFree plan
Telize GeoIPtlzNoYes

top ↑


A quick start guide and a starter example page are available in thepurchased package.

top ↑

Examples & usage

Below the default configuration:


below the weather description and max/min temperatures are turned off:

$('.ew02').EasyWeather({ showDescription: false, showMinMax: false });

and the region/state displayed in the header and the country name turned off:

	showRegion: true,
	showCountry: false


The following example shows more detailed information of the current weather condition:

	showDetails: true, width: '275px'

The detailed information is also configurable:

	showDetails: true, details: 'humidity|pressure|wind', width: '275px'

top ↑


By default the widget geolocates the current user position, alternativelya fixed location can be set:

$('.ewLoc').EasyWeather({ location: 'Sydney' });
$('.ewLoc2').EasyWeather({ location: 'Rome', showCountry: false });

top ↑


Forecasts can be displayed in a vertical or horizontal manner:

$('.ew04').EasyWeather({ forecasts: true });
$('.ew05').EasyWeather({ forecasts: true, orientation: 'horizontal', nbForecastDays: 4 });

Alternatively, they can be toggled with a link:

$('.ew06').EasyWeather({ forecasts: true, forecastsLink: true });

top ↑


With the search feature users will be able to search weather information for desired locations:

$('.ewSearch').EasyWeather({ enableSearch: true });

The number of search results is also configurable, 8 by default:

$('.ewSearch2').EasyWeather({ enableSearch: true, nbSearchResults: 15 });

top ↑


The weather data provider can be easily set, Yahoo! Weather is the default oneas it doesn't need any account:

$('.ewProviders').EasyWeather({ providerId: 'wwo' });

The order of data providers to be contacted in case of failure is alsoconfigurable:

	providerId: 'ham', providerSequenceIds: 'ham|yhw|wwo|owm|wug'

The example below implements a provider roller:

var ewProvidersRoller = $('.ewProvidersRoller').EasyWeather({
	providerId: 'owm', searchBox: true, showDetails: true, width: '270px',
	load: function() {
		if($('#slcProvider').val() !== this.provider().id) {

<!-- Drop-down options -->
<select id="slcProvider" onchange="
	<option value="yhw">Yahoo!</option>
	<option value="wwo">World Weather Online</option>
	<option value="owm">Open Weather Map</option>
	<option value="wug">Wunderground</option>
	<option value="ham">HAMweather</option>
        <option value="fio">Forecast.io</option>

It is also possible to choose the geolocation provider:

$('.ewGeoProvider').EasyWeather({ geoProviderId: 'fgip' });

top ↑


EasyWeather comes with 12 themes, and this is how you set a theme:

$('.ew-theme').EasyWeather({ theme: 'ew-yellow' });

Check the available skins with the theme roller:

theme: 'ew-teal'
var ewThemesRoller = $('#ew-theme-roller').EasyWeather({
	theme: 'ew-teal',
	load: function() {
		if($('#slcThemes').val() !== this.config().theme) {

top ↑


Additional advanced examples showing how to customise the EasyWeather widget are available in the purchased package.

top ↑


EasyWeather's documentation is available in thepurchased package.

top ↑