EasyWeather v1.3.2

Many weather services, one bright engine

← Documentation

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 for 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({ forecasts: true, orientation: 'horizontal', nbForecastDays: 4 });

Alternatively, they can be toggled with a link:

$('.ew06').EasyWeather({ 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, Yahoo! Weather is the default one as it doesn't need any account:

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

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

$('.ewProviders2').EasyWeather({ 
	providerId: 'ham', providerSequenceIds: 'ham|yhw|wwo|owm|wug'
});

The example below implements a provider roller:

var ewProvidersRoller = $('.ewProvidersRoller').EasyWeather({
	providerId: 'owm', 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="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>
</select>

It is also possible to choose the geolocation provider:

$('.ewGeoProvider').EasyWeather({ geoProviderId: 'fgip' });
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

Units

The following example changes the temperature unit to Fahrenheits:

$('.ew-fahrenheit').EasyWeather({ tempUnit: 'F' });

And the wind speed unit to Miles (Mph):

$('.ew-miles').EasyWeather({ 
	providerId: 'wwo', tempUnit: 'F', 
	windSpeedUnit: 'Miles', showDetails: true, 
	width: '275px' 
});
top ↑

Language

With Open Weather Map it is also possible to set a language for the current condition description:

var ewLangFr = $('.ew-fr').EasyWeather({ 
	providerId: 'owm', width: '280px', forecasts: true, 
	language: 'fr', todayLabel: 'Aujourd\'hui',
	weekDays: ['dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam'],
	showDetails: true, details: 'humidity|wind|pressure',
	detailLabels: { 
		humidity: '    Humidité: ', 
		wind: '     Vent: ', 
		pressure: '     Pression: ' 
	}
});
// Refreshes previously cached data for same location in this
// documentation page
ewLangFr[0].refresh();

and below the supported languages: 

var ewLang = $('.ew-lang').EasyWeather({ 
	providerId: 'owm', location: 'Barcelona', language: 'sp', forecasts: true,
	load: function() {
		if($('#slcLang').val() !== this.config().language) {
			$('#slcLang').val(this.config().language);
		}
	}
});
top ↑

Templates

EasyWidget content is also easily customisable with the template object. Below a complete list of placeholders for the current condition template: {icn}, {desc}, {date}, {Condition.provider_link}, {lnkforecasts}, {temp}, {minmax}, {Condition.description}, {Condition.humidity}, {Condition.precipitation}, {Condition.wind}, {Condition.pressure}, {Condition.visibility}, {forecastsdisplay}, {forecasts}, {cssprfx}
and the placeholders for forecast template: {icn}, {icndesc}, {date}, {minmax}, {desc}, {cssprfx} 

$('.ew-template').EasyWeather({ 
	template: {
		current: '<div>{temp}: {desc}</div>'
	}
});
$('.ew-template-forecasts').EasyWeather({ 
	orientation: 'horizontal',
	forecasts: true,
	nbForecastDays: 3,
	template: {
		forecast: '<div class="ew-left" style="margin: 0 6px">' + 
			'<div>{date}</div>' + 
			'<div><small>{minmax}</small></div>' + 
			'<div>{desc}</div>'+
			'</div>'
	}
});
top ↑

Callbacks & Delegates

The following examples show how to take advantage of the numerous callbacks and delegates.
fnSetIconUrl overrides the default icon URL, this is useful especially when we want to use custom weather icons. 

$('.ew-template').EasyWeather({ 
	providerId: 'wwo', providerSequence: false,
	forecasts: true, orientation: 'vertical', width: '180px',
	create: function(){ $(this).css({ border: '1px solid #333' }); },
	fnSetIconUrl: function(data) {
		// Icons only for World Weather Online provider
		var weatherCode = data.code,
			icnUrl = 'http://c358489.r89.cf1.rackcdn.com/' + 
			'images/weather/small/{wc}_day_sm.png';
		return icnUrl.replace('{wc}', weatherCode);
	},
	error: function() { this.cont.html(''); }
});

The following example shows how to use the widget's delegates to geolocate the user with a custom geolocation provider: 

$('.ew-template').EasyWeather({ 
	fnLocate: function() {
		this.showSpinner();
		var o = this,
			url =  'http://ip-geo.appspot.com/geo_data.js',
			loc, city, country;
 
		$.getScript(url, function() {
			var geo = com.unitedCoders.geo,
				loc,
				l;
    				
			if(geo.hasOwnProperty('ll')) {
				if(!window['com'] || !com['unitedCoders']) {
					o.showError(o.msg.error_occurred);
					return;
				}
				var geo = com.unitedCoders.geo,
					loc,
					location,
					l;
				
				if(geo.hasOwnProperty('ll')) {
					geo = geo.ll;
					l = geo.length - 1;
					loc = geo[l];
					city = loc.city;
					country = loc.country;
					location =  city + (o.config().showCountry ? ', ' + country : '');
					o.setLocation(location, true);
				}
			}
 		});
	}
});
top ↑