← Documentation 


$('.ew05').EasyWeather({ providerId: 'owm', 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, 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', 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

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: 'owm', 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) {

		return data.icon_url;

	},

	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() {

		var o = this;

		o.showSpinner();

		var url = 'http://ip-api.com/json';



		$.ajax(url)

			.done(function(data) {

				console.log(data);

				var location = data.city + (o.config().showCountry ? ', ' + data.country : '');

				o.setLocation(location, true);

			});

	}

});
top ↑