Weather Add-In for SharePoint

SharePoint weather Add-In can be added on the SharePoint home page (dashboard),  this add-in automatically fetch geolocation from the browser. And based on the location it will retrieve the Temperature, humidity and wind speed etc… you can see the step by step instructions to develop this SharePoint Add-In. Also, the complete project source code is available for download,

Souce Code Download link,

Weather AddIn

Create new Project in the Visual Studio using “App for SharePoint” template, here I’m using visual studio 2015 version. In the new project wizard select SharePoint-Hosted and rest you can select based on your requirements. The provider-hosted application can also be selected.

I have used the Local-weather GitHub project to implement this Add-In, In the project, you can find the script in the ASPX file.

Add new “Client Web Part (Host Web)” and select “Create a new app web page for the client web part content” (If you want this add-in in the Home page then we have to use new ASPX file instead of default one because it uses SharePoint master page), Edit newly created an ASPX page which is located in the Pages folder and replace with HTML which you find in my project.

        $(document).ready(function () {
            // get location from user's IP address
            $.getJSON('', function (info) {
                var locString = info.loc.split(', ');
                var latitude = parseFloat(locString[0]);
                var longitude = parseFloat(locString[1]);
                $('#location').html('Location: ' + + ', ' + info.region + ', ' +

                // get weather using OpenWeatherMap API
                $.getJSON('' + latitude + '&lon=' + longitude + '&units=metric&APPID=c3e00c8860695fd6096fe32896042eda', function (data) {
                    var windSpeedkmh = Math.round(data.wind.speed * 3.6);
                    var Celsius = Math.round(data.main.temp)
                    var iconId =[0].icon;
                    var weatherURL = "" +
                            iconId + ".png";

                    var iconImg = "<img src='" + weatherURL + "'>";
                    $('#weather-id').html('Skies: ' +[0].description);

                    $('#toFahrenheit').click(function () {
                        $('#temperature').html(Math.round((9 / 5) * Celsius + 32));
                        $('#wind-speed').html(Math.round(windSpeedkmh * 0.621) + ' mph')
                    $('#toCelsius').click(function () {
                        $('#wind-speed').html(windSpeedkmh + ' km/hr')

                    $('#wind-speed').html(windSpeedkmh + ' km/h');
                    $('#humidity').html('Humidity: ' + data.main.humidity + ' %');

<div class="row">
<div class="col-6">
<div id="sky-image"></div>
<div id="location"></div>
<div id="weather-id"></div>
<div>Temperature: <span id="temperature"></span>&deg<a href="#" id="toCelsius">C</a> | &deg<a href="#" id="toFahrenheit">F</a></div>
<div>Wind speed: <span id="wind-speed"></span></div>
<div id="humidity"></div>

Please feel free to let me know if you have any queries in the comment section, I’m happy to help you!!

Souce Code Download link

7 thoughts on “Weather Add-In for SharePoint

  1. koti August 25, 2017 / 12:57 pm

    Hi Ravi,

    Thanks for great post.

    I am facing a problem while placing the web part on a page.

    Using App catalog site I added to my site collection. It is showing in site contents page.

    But when I try to add in a page I am not able to see this web part.



    • Ravichandran K August 25, 2017 / 1:06 pm

      Hi Koti,

      you have to use “Client Web Part (Host Web)”, please make sure it and let me know if you have any query


      • Koti September 9, 2017 / 1:44 pm

        Hi Ravi,

        I downloaded your code and used it with out any changes.

        But I am able to see app only in site contents. not able to add on homepage.


      • Koti September 10, 2017 / 8:04 pm

        I don’t know previously where it went wrong. Now I added a new page and tested , this attempt I got two web parts.

        Thanks .


  2. Matt Wylie August 30, 2017 / 8:55 pm

    I’ve followed the directions but when hitting F5 to run, I’m getting a “Program does not contain a static ‘Main’ method suitable for an entry point”. Thoughts?



Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s