Easy Weather

This plugin provide a current Weather information by your given location. This is allows you to display weather details, temperature, forecast, quarterly temperature, icons etc...

Note: This is an API base plugin, you must have any serve to use it.

How to use it?

For use this plugin firstly you have to Register your project on Open Weather Map and obtain an API key.

Demo

• Simple Weather
• Card Weather
• Classic Weather
• Compact Weather
• Custom Weather
• Full Weather
• Minimal Weather

Installation

Gulp Build

Development Build

Build development version of Easy Weather:

gulp build

Production Build

Build production version of Easy Weather:

gulp production

You can show result in dits/ folder.

Gulp serve

Running demos

All demos are located in the dist/ folder and this command provides a running environment to watch it:

gulp production

Include css file in the head of your page.

<link rel="stylesheet" href="dist/css/styles.css">

Add HTML code in the body of your page.

<div id="weather"></div>

Include js file in the head or body of your page.

<script src="dist/js/easy-weather.js"></script>

Finally you have to initialize weather element in JS.

<script type="text/javascript">
    const weather = new EasyWeather('#weather', {
        key: '1d74efe09d3495016664881f4a09a7ff',
        location: 'London',
        template: 'default'
    });
</script>

Options

key: string(null) OpenWeatherMap API key for your application.

lang: string('en') Plugin support multilingual Check here.

code: integer(null) Defines the city ID Check here.

location: string(null) Defines the city name.

lat: integer(null) Defines the latitude.

lng: integer(null) Defines the longitude.

template: string(null) Plugin comes with some different pre-define templates('card' | 'classic' | 'compact' | 'default' | 'full' | 'minimal').

iconStyle: string('flat') Defines the icon styles('flat', 'line').

description: boolean(false) To display the weather description.

icon: boolean(true) Show weather icons.

iconPath: string('images/icons/') Defines the icon path. Note: The folder must have flat or line icon folder to display one of them.

iconAnimation: boolean(false) Defines the icon animation. Note: I'll be releasing icon animations in the future.

sunTime: boolean(false) To display sunset and sunrise.

today: boolean(true) To display today date.

details: boolean(false) To display the weather details.

forecast: boolean(false) To display the weather forecast.

quarterly: boolean(false) To display the weather quarterly.

units: object({...}) This object holds weather default units.

units.temp: string('c') Defines the weather temperature units('c' | 'f' | 'K').

units.wind: string('mps') Defines the wind units('km/h' | 'mps').

units.visibility: string('km') Defines the weather visibility units('km' | 'mi').

title: object({...}) This object holds weather details title text.

title.maxTemp: string('Max') Holds max temperature text to display.

title.minTemp: string('Min') Holds min temperature text to display.

title.forecast: string('Forecast') Holds forecast text to display.

title.quarterly: string('Quarterly') Holds quarterly text to display.

title.details: string('Details') Holds weather details text to display.

customTemplate: function(element, weather) You can use this function to display your custom weather template UI.

License

The MIT License (MIT)