JavaScript Premium Weather Widget

JavaScript Premium Weather Widget

Weather Conditions and Forecast Script

Using the Widget

The provided directive is able to retrieve the weather condition and forecasts for client or other desired location and displays them in a nice responsive HTML theme template.

For the simplicity of the learning process, all the samples will use a simple HTML page layout.
Also, you need a basic understanding of HTML and JavaScript. If you are not familiar with HTML or JavaScript, you can find plenty of documentation over the internet.

The following samples will show you how to integrate the provided AngularJS directive into your own projects.
If you don't know what a directive is, you just need to know that it is a sort of a HTML tag or attribute that has the ability to change the DOM.

The server file structure

The following file structure is assumed to exists on the server as this is the default structure that the package comes with.

tut-file-structure.png
The assumed server file structure

The file we are editing is /sample/index.html

Note:
All the samples presented in these tutorials are available under the same /sample/ directory of the downloaded package.

Default Weather Widget

The following code shows how to integrate the directive with the default options. 

<html>
    <head>
        <link rel="stylesheet" href="../bins/lib/bootstrap/css/bootstrap.min.css"/>
        <script type="text/javascript" src="../bins/lib/skycons/skycons.js"></script>
        <script type="text/javascript" src="../bins/lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="../bins/lib/angular/angular-animate.min.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
        <script type="text/javascript" src="../bins/wl-ng-weather.js"></script>
    </head>
    <body>
        <div ng-app="wl-ng-weather" wl-ng-weather></div>
        <script type="text/javascript">
            angular.module('wl-ng-weather').value('bins', '../bins');
            angular.module('wl-ng-weather').value('apikey', 'your-forecast.io-key');
        </script>
    </body>
</html>

After browsing to our http;//the-server-root/javascript-premium-weather-widget/sample/index.html, we should get something like:

tut-directive-default.png
The default weather widget in action

Graphical Customization of the Weather Widget

The following code shows how to customize the widget with a theme and some static background color. 

<html>
    <head>
        <link rel="stylesheet" href="../bins/lib/bootstrap/css/bootstrap.min.css"/>
        <script type="text/javascript" src="../bins/lib/skycons/skycons.js"></script>
        <script type="text/javascript" src="../bins/lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="../bins/lib/angular/angular-animate.min.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
        <script type="text/javascript" src="../bins/wl-ng-weather.js"></script>
    </head>
    <body>
        <div ng-app="wl-ng-weather"
            wl-ng-weather
            theme="complex3"
            background="#6F004B"></div>
        <script type="text/javascript">
            angular.module('wl-ng-weather').value('bins', '../bins');
            angular.module('wl-ng-weather').value('apikey', 'your-forecast.io-key');
        </script>
    </body>
</html>

After browsing to our http;//the-server-root/javascript-premium-weather-widget/sample/index.html, we should get something like:

tut-directive-custom-graphics.png
Graphic customized weather widget in action

Specifying an initial location

By default, the widget will get the location using geo-location.
This behaviour can be overridden by setting an initial location explicitly.
The explicit initial location can be specified by providing a latitude and longitude gps coordinates or by providing a string location that eventually can be evaluated as country, city, zone, area, zipcode, company name, address, street etc.
Of course, this will be just the initial location; it can be changed by interacting with the widget. Please check the User Interaction section for more details.

Specifying an initial location using an address

The most convenient way of setting an initial location is by specifying an address.
The address can be quite anything: country, city, zone, area, zipcode, company name, address, street etc.
In order to eliminate any confusion when searching an address, you can be as specific as you want by mixing any address elements such as countries, cities, street names etc.
For instance, there is location "Boston" both in USA and in UK, and if you want to get the weather from "Boston UK", just set the address to "Boston UK".
The address search is case-insensitive. 

<html>
    <head>
        <link rel="stylesheet" href="../bins/lib/bootstrap/css/bootstrap.min.css"/>
        <script type="text/javascript" src="../bins/lib/skycons/skycons.js"></script>
        <script type="text/javascript" src="../bins/lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="../bins/lib/angular/angular-animate.min.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
        <script type="text/javascript" src="../bins/wl-ng-weather.js"></script>
    </head>
    <body>
        <div ng-app="wl-ng-weather"
            wl-ng-weather
            theme="widget1"
            background="#007B50"
            location="boston uk"></div>
        <script type="text/javascript">
            angular.module('wl-ng-weather').value('bins', '../bins');
            angular.module('wl-ng-weather').value('apikey', 'your-forecast.io-key');
        </script>
    </body>
</html>

After browsing to our http;//the-server-root/javascript-premium-weather-widget/sample/index.html, we should get something like:

tut-directive-custom-location-address.png
Setting the initial location by address

Specifying an initial location using latitude and longitude GPS coordinates

If very accurate precision is needed for setting the initial location, it can be specified by using GPS coordinates (latitude and longitude attributes).
If latitude or longitude are set, the location parameter will be just shown like a label as the weather will be retrieved from the (latitude, longitude) pair. 

<html>
    <head>
        <link rel="stylesheet" href="../bins/lib/bootstrap/css/bootstrap.min.css"/>
        <script type="text/javascript" src="../bins/lib/skycons/skycons.js"></script>
        <script type="text/javascript" src="../bins/lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="../bins/lib/angular/angular-animate.min.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
        <script type="text/javascript" src="../bins/wl-ng-weather.js"></script>
    </head>
    <body>
        <div ng-app="wl-ng-weather"
            wl-ng-weather
            theme="widget3"
            background="dynamic"
            latitude="42.872197"
            longitude="-0.083404"
            location="National Park on Spanish Border"></div>
        <script type="text/javascript">
            angular.module('wl-ng-weather').value('bins', '../bins');
            angular.module('wl-ng-weather').value('apikey', 'your-forecast.io-key');
        </script>
    </body>
</html>

After browsing to our http;//the-server-root/javascript-premium-weather-widget/sample/index.html, we should get something like:

tut-directive-custom-location-gps-coordinates.png
Setting the initial location by gps coordinates

Initial metric system

By default, SI metric system (abbreviated from French: Le Système International d'Unités) is used that sets the following measure units: °C for temperature, km/h for wind speed and mBar for pressure.
The widget can initially show weather data using also the US metric system.
The metric system can be changed from within the widget by interacting with it. Please check the User Interaction section for more details. 

<html>
    <head>
        <link rel="stylesheet" href="../bins/lib/bootstrap/css/bootstrap.min.css"/>
        <script type="text/javascript" src="../bins/lib/skycons/skycons.js"></script>
        <script type="text/javascript" src="../bins/lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="../bins/lib/angular/angular-animate.min.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
        <script type="text/javascript" src="../bins/wl-ng-weather.js"></script>
    </head>
    <body>
        <div ng-app="wl-ng-weather"
            wl-ng-weather
            theme="widget2"
            units="us"
            location="ibiza"></div>
        <script type="text/javascript">
            angular.module('wl-ng-weather').value('bins', '../bins');
            angular.module('wl-ng-weather').value('apikey', 'your-forecast.io-key');
        </script>
    </body>
</html>

After browsing to our http;//the-server-root/javascript-premium-weather-widget/sample/index.html, we should get something like:

tut-directive-metrics.png
Setting the initial metric system to US

Widget localization

Forecast.io supports the following languages: bs (bosnian), de (german), en (english), es (spanish), fr (french), it (italian), nl (dutch), pl (polish), pt (portuguese), ru (russian).
Although, forecast.io supports only a limited language set, the widget texts (i.e. weekdays, high/low etc.) can still be localized using external language files located under the javascript-premium-weather-widget/bins/lang directory.
If the specified language is not supported by forecast.io, the weather messages will be returned in english as it is the default language of forecast.io.
A few more languages were already included in the package: hi (hindi), hr (croatian), ro (romanian), tr (turkish) and using them will localize the widget texts but the forecasts will be in english as forecast.io do not support these languages.
More languages can be added add or the existing ones can be modified.
For more information on localization support, please see the Localization Support section. 

<html>
    <head>
        <link rel="stylesheet" href="../bins/lib/bootstrap/css/bootstrap.min.css"/>
        <script type="text/javascript" src="../bins/lib/skycons/skycons.js"></script>
        <script type="text/javascript" src="../bins/lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="../bins/lib/angular/angular-animate.min.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
        <script type="text/javascript" src="../bins/wl-ng-weather.js"></script>
    </head>
    <body>
        <div ng-app="wl-ng-weather"
            wl-ng-weather
            theme="wide2"
            location="munich"
            lang="de"></div>
        <script type="text/javascript">
            angular.module('wl-ng-weather').value('bins', '../bins');
            angular.module('wl-ng-weather').value('apikey', 'your-forecast.io-key');
        </script>
    </body>
</html>

After browsing to our http;//the-server-root/javascript-premium-weather-widget/sample/index.html, we should get something like:

tut-directive-localization.png
The localized weather widget
Regular License $9.00
Use by you or one client, in a single end product which end users are not charged for.

Extended License $45.00
Use by you or one client, in a single end product which end users can be charged for.

Short Information

WiseLoop JavaScript Premium Weather Widget is an AngularJS based weather condition and forecast script.
Its flexibility and easiness makes it perfect for displaying local or searched weather information in websites, blogs, portals, web and mobile apps.
It features GEO location, address search, localization, animations, theme support with really nice included themes that are responsive and compatible with mobile devices.

Buyer rating:
199 Sales