Get current weather using JavaScript in SharePoint Online/2013/2016

In this SharePoint tutorial, we will disucss how we can get current weather using JavaScript in SharePoint Online/2013/2016. Here we will see how we can use OpenWeatherMap Weather API using JavaScript in SharePoint.

OpenWeatherMap is one of the leading digital weather information providers. The OpenWeatherMap API is free to use and it also has a paid version having more weather data and features.

OpenWeatherMap provides:

  • Current weather for any geolocation
  • 5-days/3 hour weather forecast
  • 16-days/daily weather forecast
  • Historical weather data for 6 years in the past
  • Weather maps: Forecast, Historical, Current
  • Relief maps
  • Weather alerts
  • UV index
  • Network of weather stations

Get current weather javascript SharePoint

To get current weather using JavaScript SharePoint, check out the OpenWeatherMap guide to generate the API key which we will use to call.

In SharePoint we can insert the code using a Script editor web part or a content editor web part inside a web part page.

Step 1: Open you SharePoint site and Add a Script Editor Web part in your web part page.

Step 2: Add the CSS and JavaScript file as a reference.

Step 3: Copy the below code

<script src="https://gist.github.com/lyuba/874368"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js"></script>  
<script type="text/javascript">  
    $(document).ready(function () {  
        var settings = {  
            "async": true,  
            "crossDomain": true,  
            "url": "https://api.openweathermap.org/data/2.5/weather?lat=25.2854&lon=51.5310&units=metric&appid=8419181060b4dc0a4080aca18bcd29b6",  
            "method": "GET",  
            "processData": false,  
            "contentType": false,  
            "mimeType": "multipart/form-data",  
        }  
        $.ajax(settings).done(function (response) {  
            console.log(response);  
            var data = JSON.parse(response);  
            var selector;  
            switch (data.weather[0].main) {  
                case 'Haze': $('.Windy').show(); selector = '.' + 'Windy' + '_';  
                    break;  
                case 'Cloudy': $('.Cloudy').show(); selector = '.' + data.weather[0].main + '_';  
                    break;  
                case 'Rain': $('.Rain').show(); selector = '.' + data.weather[0].main + '_';  
                    break;  
                case 'Windy': $('.Windy').show(); selector = '.' + data.weather[0].main + '_';  
                    break;  
                case 'Snow': $('.Snow').show(); selector = '.' + 'Cloudy' + '_';  
                    break;  
                case 'Mist': $('.Cloudy').show(); selector = '.' + 'Cloudy' + '_';  
                    break;  
                default: $('.Cloudy').show(); selector = '.' + data.weather[0].main + '_';  
            }  
            $(selector + 'temp').text(data.main.temp + "°");  
            $(selector + 'wind').text(data.wind.speed + "MPH");  
            $(selector + 'humidity').text(data.main.humidity + "%");  
            $(selector + 'pressure').text(data.main.pressure + "°");  
        })  
            .fail(function (response) {  
                console.log("error fecting wether data");  
  
            });  
  
    });  
</script>  
<!-- end script for weather-->

Step 4: Click on Save button and now you will get current weather in QATAR. in the SharePoint Page.

You can check the console (In Google Chrome More tools -> Developer Tools), and the output will appear like below:

Get current weather javascript SharePoint
Get current weather javascript SharePoint

You may like following SharePoint jsom tutorials:

This SharePoint tutorial explains how to get current weather using JavaScript in SharePoint Online/2013/2016.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Rajkiran Swain

Rajkiran is currently working as a SharePoint Consultant in QATAR . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).

>