SharePoint Hosted App to retrieve local weather information

30. April 2015 06:08 by Rashid Aziz in Sharepoint blogs  //  Tags: ,   //   Comments

In one of my previous post I explained how to get current user locale information like city, country, latitude, longitude, IP address using SharePoint hosted app. In this post I have taken one further step and get the weather information of current logged in user's location.

Follow the below steps to achieve the same results

Create new SharePoint hosted app project inside visual studio.

Edit the “app.js” file and replace the code with below code. Remember to update APIKey variable value in below code. You can new APIKey from https://developer.forecast.io/register and it is free.

jQuery.ajax({

    url: '//freegeoip.net/json/',

    type: 'POST',

    dataType: 'jsonp',

    success: function (location) {

        jQuery('#city').html(location.city);

        jQuery('#longitude').html(location.longitude);

        jQuery('#latitude').html(location.latitude);

        jQuery('#country-name').html(location.country_name);

        GetWeatherInfo(location.latitude, location.longitude);

    }

});

function GetWeatherInfo(lati, longi)

{

    var APIkey = 'API Key'  // Get a new key from https://developer.forecast.io/register and it is free

    var urlForecast = 'https://api.forecast.io/forecast/';

    var unit = 'si'; // "si" is shortcut for Celsius and "us" is shortcut for Fahrenheit

    jQuery.ajax({

        url: urlForecast + APIkey + "/" + lati + "," + longi + "?callback=?&units=" + unit ,

        type: 'GET',

        dataType: 'jsonp',

        timeout: 3500, 

        success: function (data) {

            $('#currentTemp').html(data.currently.temperature.toFixed(0));

            $('#minTemp').html(data.daily.data[0].temperatureMin.toFixed(0));

            $('#maxTemp').html(data.daily.data[0].temperatureMax.toFixed(0));

            $('#humidity').html(data.currently.humidity); 

            $('#windSpeed').html(data.daily.data[0].windSpeed.toFixed(0));

            $('#windBearing').html(data.daily.data[0].windBearing.toFixed(0));

            $('#visibility').html(data.daily.data[0].visibility.toFixed(0));

            $('#cloudCover').html(data.daily.data[0].cloudCover.toFixed(0));

            $('#pressure').html(data.daily.data[0].pressure.toFixed(0));

            $('#summary').html(data.currently.summary);

        }

    });
}

On default.aspx page replace the “PlaceHolderMain” control with the following code

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

<label for="city">City: </label><label id="city"></label> <br />

    <label for="country-name">Country: </label><label id="country-name"></label>  <br />

    <label for="currentTemp">Current Temprature: </label><label id="currentTemp"></label> <br />

    <label for="minTemp">Min Temp: </label><label id="minTemp"></label> <br />

    <label for="maxTemp">Max Temp: </label><label id="maxTemp"></label> <br />

    <label for="humidity">Humidity (0-1): </label><label id="humidity"></label> <br />

    <label for="windSpeed">Wind Speed (km/h): </label><label id="windSpeed"></label> <br />

    <label for="windBearing">Wind Bearing: </label><label id="windBearing"></label> <br />

    <label for="Visibility">Visibility (km): </label><label id="visibility"></label> <br />

    <label for="cloudCover">Cloud Cover: </label><label id="cloudCover"></label> <br />

    <label for="pressure">Pressure (mb): </label><label id="pressure"></label> <br />

    <label for="summary">Summary: </label><label id="summary"></label> <br />

</asp:Content>

Press F5 and see the magic 

My Results

A user from London Office

 

You can build UI something like below using css once you have all the weather information in hand. 

    

Happy SharePoint coding Smile

blog comments powered by Disqus

Stay connected

SharePoint Links

Month List