JavaScript Premium Weather Widget

JavaScript Premium Weather Widget

Weather Conditions and Forecast Script

Script Installation


  • A JavaScript enabled internet browser;
  • AngularJS 1.2.2 or newer;
  • Bootstrap 3 (CSS only).

Step 1: Script Directory

Copy the entire /javascript-premium-weather-widget directory on your web server. The directory is included in the downloaded archive.

Step 2: Include the Script

Include the /javascript-premium-weather-widget/bins/wl-ng-weather.js in your page.
The script has AngularJS, bootstrap.css, skycons and google maps API as dependencies, so they should be included also.
The paths are relative to your current HTML page, so please pay attention to that.

<link href="/javascript-premium-weather-widget/bins/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<script src="/javascript-premium-weather-widget/bins/lib/skycons/skycons.js" type="text/javascript"></script>
<script src="/javascript-premium-weather-widget/bins/lib/angular/angular.min.js" type="text/javascript"></script>
<script src="/javascript-premium-weather-widget/bins/lib/angular/angular-animate.min.js" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
<script src="/javascript-premium-weather-widget/bins/wl-ng-weather.js" type="text/javascript"></script>

Step 3: Show the weather widget

The weather widget is shown by adding a div as below:

<div ng-app="wl-ng-weather"

Step 4: Configuration

In order to configure the script properly, please visit to get a API key. Registration is free, very easy and you get 1000 free API calls per day. After getting the key, just replace the string with your actual key.
Also, the module needs to know where its files are located. Add the following code at the end of your HTML page but replace the path to your actual path relative to the HTML page:

<script type="text/javascript">
    angular.module('wl-ng-weather').value('bins', 'javascript-premium-weather-widget/bins');
    angular.module('wl-ng-weather').value('apikey', '');
Please be aware that the path is relative to the current file where your JavaScript application is included or executed.

A Basic Usage Sample

For instance, if you have a file structure like:

Server file structure example

Then, index.html should look like:

        <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=""></script>
        <script type="text/javascript" src="../bins/wl-ng-weather.js"></script>
        <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', '');
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:
238 Sales