EasyWeather v1.4.0
Purchase

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 2 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 2 different geolocation services.

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

Main features


top ↑

Weather & geolocation providers

This is the list of supported weather data providers:

NameCodeRequires accountFree planThrottled by APINb of forecast daysLanguage support
Weather APIwapyesyesyes10yes
Open Weather Mapowmyesyesyes7yes

And below the list of geolocation providers:

NameCodeRequires accountFree plan
geoPlugingeoplNoYes
ipinfo.ioipinfYesYes

top ↑

Installation

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


top ↑

Examples & usage

Below the default configuration:

$('.ew01').EasyWeather();
	  		

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:

$('.ew02').EasyWeather({
	showRegion: true,
	showCountry: false
});
	  			

Detailed

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

$('.ew-details').EasyWeather({
	showDetails: true, width: '275px'
});

The detailed information is also configurable:

$('.ew-details02').EasyWeather({
	showDetails: true, details: 'humidity|pressure|wind', width: '275px'
});
	  			

top ↑

Location

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

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

top ↑

Forecasts

Forecasts can be displayed in a vertical or horizontal manner:

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

Alternatively, they can be toggled with a link:

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

top ↑

Search

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 ↑

Providers

The weather data provider can be easily set, World Weather Online is the default one as it doesn't need any account:

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

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

$('.ewProviders2').EasyWeather({
	providerId: 'owm', providerSequenceIds: 'owm|wap'
});
	  			

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) {
			$('#slcProvider').val(this.provider().id);
		}
	}
});

<!-- Drop-down options -->
<select id="slcProvider" onchange="
	ewProvidersRoller[0].setWeatherProvider(this.value);
	ewProvidersRoller[0].refresh();">
	<option value="wap">Weather API</option>
	<option value="owm">Open Weather Map</option>
</select>

It is also possible to choose the geolocation provider:

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

top ↑

Themes

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) {
			$('#slcThemes').val(this.config().theme);
		}
	}
});	  			

top ↑

Customisation

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


top ↑

Documentation

EasyWeather's documentation is available in the purchased package.


top ↑