Current Location Weather - SharePoint Components

In order to get the current location weather we need to use Geo-location of HTML5 supported browsers.

It will give ask you to allow access to your location, Click on allow

It will then get the latitude and longitude of the device.

Then it will call the Yahoo Api for the weather information and then provide you with the details

Below is the code:

Weather API JS:

/*! simpleWeather v3.1.0 - http://simpleweatherjs.com */
(function($) {
  'use strict';

  function getAltTemp(unit, temp) {
    if(unit === 'f') {
      return Math.round((5.0/9.0)*(temp-32.0));
    } else {
      return Math.round((9.0/5.0)*temp+32.0);
    }
  }

  $.extend({
    simpleWeather: function(options){
      options = $.extend({
        location: '',
        woeid: '',
        unit: 'f',
        success: function(weather){},
        error: function(message){}
      }, options);

      var now = new Date();
      var weatherUrl = 'https://query.yahooapis.com/v1/public/yql?format=json&rnd=' + now.getFullYear() + now.getMonth() + now.getDay() + now.getHours() + '&diagnostics=true&callback=?&q=';

      if(options.location !== '') {
        /* If latitude/longitude coordinates, need to format a little different. */
        var location = '';
        if(/^(\-?\d+(\.\d+)?),\s*(\-?\d+(\.\d+)?)$/.test(options.location)) {
          location = '(' + options.location + ')';
        } else {
          location = options.location;
        }

        //weatherUrl += 'select * from weather.forecast where woeid in (select woeid from geo.places(1) where text="' + location + '") and u="' + options.unit + '"';
     weatherUrl += 'select * from weather.forecast where woeid in (SELECT woeid FROM geo.places WHERE text="'+location+'")';
      } else if(options.woeid !== '') {
        weatherUrl += 'select * from weather.forecast where woeid=' + options.woeid + ' and u="' + options.unit + '"';
      } else {
        options.error('Could not retrieve weather due to an invalid location.');
        return false;
      }

      $.getJSON(
        encodeURI(weatherUrl),
        function(data) {
          if(data !== null && data.query !== null && data.query.results !== null && data.query.results.channel.description !== 'Yahoo! Weather Error') {
            var result = data.query.results.channel,
                weather = {},
                forecast,
                compass = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW', 'N'],
                image404 = 'https://s.yimg.com/os/mit/media/m/weather/images/icons/l/44d-100567.png';

            weather.title = result.item.title;
            weather.temp = result.item.condition.temp;
            weather.code = result.item.condition.code;
            weather.todayCode = result.item.forecast[0].code;
            weather.currently = result.item.condition.text;
            weather.high = result.item.forecast[0].high;
            weather.low = result.item.forecast[0].low;
            weather.text = result.item.forecast[0].text;
            weather.humidity = result.atmosphere.humidity;
            weather.pressure = result.atmosphere.pressure;
            weather.rising = result.atmosphere.rising;
            weather.visibility = result.atmosphere.visibility;
            weather.sunrise = result.astronomy.sunrise;
            weather.sunset = result.astronomy.sunset;
            weather.description = result.item.description;
            weather.city = result.location.city;
            weather.country = result.location.country;
            weather.region = result.location.region;
            weather.updated = result.item.pubDate;
            weather.link = result.item.link;
            weather.units = {temp: result.units.temperature, distance: result.units.distance, pressure: result.units.pressure, speed: result.units.speed};
            weather.wind = {chill: result.wind.chill, direction: compass[Math.round(result.wind.direction / 22.5)], speed: result.wind.speed};

            if(result.item.condition.temp < 80 && result.atmosphere.humidity < 40) {
              weather.heatindex = -42.379+2.04901523*result.item.condition.temp+10.14333127*result.atmosphere.humidity-0.22475541*result.item.condition.temp*result.atmosphere.humidity-6.83783*(Math.pow(10, -3))*(Math.pow(result.item.condition.temp, 2))-5.481717*(Math.pow(10, -2))*(Math.pow(result.atmosphere.humidity, 2))+1.22874*(Math.pow(10, -3))*(Math.pow(result.item.condition.temp, 2))*result.atmosphere.humidity+8.5282*(Math.pow(10, -4))*result.item.condition.temp*(Math.pow(result.atmosphere.humidity, 2))-1.99*(Math.pow(10, -6))*(Math.pow(result.item.condition.temp, 2))*(Math.pow(result.atmosphere.humidity,2));
            } else {
              weather.heatindex = result.item.condition.temp;
            }

            if(result.item.condition.code == '3200') {
              weather.thumbnail = image404;
              weather.image = image404;
            } else {
              weather.thumbnail = 'https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/' + result.item.condition.code + 'ds.png';
              weather.image = 'https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/' + result.item.condition.code + 'd.png';
            }

            weather.alt = {temp: getAltTemp(options.unit, result.item.condition.temp), high: getAltTemp(options.unit, result.item.forecast[0].high), low: getAltTemp(options.unit, result.item.forecast[0].low)};
            if(options.unit === 'f') {
              weather.alt.unit = 'c';
            } else {
              weather.alt.unit = 'f';
            }

            weather.forecast = [];
            for(var i=0;i<result.item.forecast.length;i++) {
              forecast = result.item.forecast[i];
              forecast.alt = {high: getAltTemp(options.unit, result.item.forecast[i].high), low: getAltTemp(options.unit, result.item.forecast[i].low)};

              if(result.item.forecast[i].code == "3200") {
                forecast.thumbnail = image404;
                forecast.image = image404;
              } else {
                forecast.thumbnail = 'https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/' + result.item.forecast[i].code + 'ds.png';
                forecast.image = 'https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/' + result.item.forecast[i].code + 'd.png';
              }

              weather.forecast.push(forecast);
            }

            options.success(weather);
          } else {
            options.error('There was a problem retrieving the latest weather information.');
          }
        }
      );
      return this;
    }
  });
})(jQuery);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

/*! simpleWeather v3.1.0 - http://simpleweatherjs.com */

(function($) {

'use strict';

function getAltTemp(unit, temp) {

if(unit === 'f') {

return Math.round((5.0/9.0)*(temp-32.0));

} else {

return Math.round((9.0/5.0)*temp+32.0);

}

$.extend({

simpleWeather: function(options){

options = $.extend({

location: '',

woeid: '',

unit: 'f',

success: function(weather){},

error: function(message){}

}, options);

var now = new Date();

var weatherUrl = 'https://query.yahooapis.com/v1/public/yql?format=json&rnd=' + now.getFullYear() + now.getMonth() + now.getDay() + now.getHours() + '&diagnostics=true&callback=?&q=';

if(options.location !== '') {

/* If latitude/longitude coordinates, need to format a little different. */

var location = '';

if(/^(\-?\d+(\.\d+)?),\s*(\-?\d+(\.\d+)?)$/.test(options.location)) {

location = '(' + options.location + ')';

} else {

location = options.location;

}

//weatherUrl += 'select * from weather.forecast where woeid in (select woeid from geo.places(1) where text="' + location + '") and u="' + options.unit + '"';

weatherUrl += 'select * from weather.forecast where woeid in (SELECT woeid FROM geo.places WHERE text="'+location+'")';

} else if(options.woeid !== '') {

weatherUrl += 'select * from weather.forecast where woeid=' + options.woeid + ' and u="' + options.unit + '"';

} else {

options.error('Could not retrieve weather due to an invalid location.');

return false;

}

$.getJSON(

encodeURI(weatherUrl),

function(data) {

if(data !== null && data.query !== null && data.query.results !== null && data.query.results.channel.description !== 'Yahoo! Weather Error') {

var result = data.query.results.channel,

weather = {},

forecast,

compass = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW', 'N'],

image404 = 'https://s.yimg.com/os/mit/media/m/weather/images/icons/l/44d-100567.png';

weather.title = result.item.title;

weather.temp = result.item.condition.temp;

weather.code = result.item.condition.code;

weather.todayCode = result.item.forecast[0].code;

weather.currently = result.item.condition.text;

weather.high = result.item.forecast[0].high;

weather.low = result.item.forecast[0].low;

weather.text = result.item.forecast[0].text;

weather.humidity = result.atmosphere.humidity;

weather.pressure = result.atmosphere.pressure;

weather.rising = result.atmosphere.rising;

weather.visibility = result.atmosphere.visibility;

weather.sunrise = result.astronomy.sunrise;

weather.sunset = result.astronomy.sunset;

weather.description = result.item.description;

weather.city = result.location.city;

weather.country = result.location.country;

weather.region = result.location.region;

weather.updated = result.item.pubDate;

weather.link = result.item.link;

weather.units = {temp: result.units.temperature, distance: result.units.distance, pressure: result.units.pressure, speed: result.units.speed};

weather.wind = {chill: result.wind.chill, direction: compass[Math.round(result.wind.direction / 22.5)], speed: result.wind.speed};

if(result.item.condition.temp < 80 && result.atmosphere.humidity < 40) {

weather.heatindex = -42.379+2.04901523*result.item.condition.temp+10.14333127*result.atmosphere.humidity-0.22475541*result.item.condition.temp*result.atmosphere.humidity-6.83783*(Math.pow(10, -3))*(Math.pow(result.item.condition.temp, 2))-5.481717*(Math.pow(10, -2))*(Math.pow(result.atmosphere.humidity, 2))+1.22874*(Math.pow(10, -3))*(Math.pow(result.item.condition.temp, 2))*result.atmosphere.humidity+8.5282*(Math.pow(10, -4))*result.item.condition.temp*(Math.pow(result.atmosphere.humidity, 2))-1.99*(Math.pow(10, -6))*(Math.pow(result.item.condition.temp, 2))*(Math.pow(result.atmosphere.humidity,2));

} else {

weather.heatindex = result.item.condition.temp;

}

if(result.item.condition.code == '3200') {

weather.thumbnail = image404;

weather.image = image404;

} else {

weather.thumbnail = 'https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/' + result.item.condition.code + 'ds.png';

weather.image = 'https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/' + result.item.condition.code + 'd.png';

}

weather.alt = {temp: getAltTemp(options.unit, result.item.condition.temp), high: getAltTemp(options.unit, result.item.forecast[0].high), low: getAltTemp(options.unit, result.item.forecast[0].low)};

if(options.unit === 'f') {

weather.alt.unit = 'c';

} else {

weather.alt.unit = 'f';

}

weather.forecast = [];

for(var i=0;i<result.item.forecast.length;i++) {

forecast = result.item.forecast[i];

forecast.alt = {high: getAltTemp(options.unit, result.item.forecast[i].high), low: getAltTemp(options.unit, result.item.forecast[i].low)};

if(result.item.forecast[i].code == "3200") {

forecast.thumbnail = image404;

forecast.image = image404;

} else {

forecast.thumbnail = 'https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/' + result.item.forecast[i].code + 'ds.png';

forecast.image = 'https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/' + result.item.forecast[i].code + 'd.png';

}

weather.forecast.push(forecast);

}

options.success(weather);

} else {

options.error('There was a problem retrieving the latest weather information.');

}

);

return this;

}

});

})(jQuery);

Main Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <style type="text/css">
         @font-face {
         font-family: 'weather';
         src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
         src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
         font-weight: normal;
         font-style: normal;
         }
         #weather i {
         color: #fff;
         font-family: weather;
         font-size: 1.5em;
         font-weight: normal;
         font-style: normal;
         line-height: 1.0;
         text-transform: none;
         }
         .icon-0:before { content: ":"; }
         .icon-1:before { content: "p"; }
         .icon-2:before { content: "S"; }
         .icon-3:before { content: "Q"; }
         .icon-4:before { content: "S"; }
         .icon-5:before { content: "W"; }
         .icon-6:before { content: "W"; }
         .icon-7:before { content: "W"; }
         .icon-8:before { content: "W"; }
         .icon-9:before { content: "I"; }
         .icon-10:before { content: "W"; }
         .icon-11:before { content: "I"; }
         .icon-12:before { content: "I"; }
         .icon-13:before { content: "I"; }
         .icon-14:before { content: "I"; }
         .icon-15:before { content: "W"; }
         .icon-16:before { content: "I"; }
         .icon-17:before { content: "W"; }
         .icon-18:before { content: "U"; }
         .icon-19:before { content: "Z"; }
         .icon-20:before { content: "Z"; }
         .icon-21:before { content: "Z"; }
         .icon-22:before { content: "Z"; }
         .icon-23:before { content: "Z"; }
         .icon-24:before { content: "E"; }
         .icon-25:before { content: "E"; }
         .icon-26:before { content: "3"; }
         .icon-27:before { content: "a"; }
         .icon-28:before { content: "A"; }
         .icon-29:before { content: "a"; }
         .icon-30:before { content: "A"; }
         .icon-31:before { content: "6"; }
         .icon-32:before { content: "1"; }
         .icon-33:before { content: "6"; }
         .icon-34:before { content: "1"; }
         .icon-35:before { content: "W"; }
         .icon-36:before { content: "1"; }
         .icon-37:before { content: "S"; }
         .icon-38:before { content: "S"; }
         .icon-39:before { content: "S"; }
         .icon-40:before { content: "M"; }
         .icon-41:before { content: "W"; }
         .icon-42:before { content: "I"; }
         .icon-43:before { content: "W"; }
         .icon-44:before { content: "a"; }
         .icon-45:before { content: "S"; }
         .icon-46:before { content: "U"; }
         .icon-47:before { content: "S"; }
      </style>
   </head>
   <body>
      <div id="weather" class="col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
      <script type="text/javascript"src="/SiteAssets/jquery.simpleWeather.js"></script>
      <script type="text/javascript">
         jQuery(document).ready(function ($) {
         navigator.geolocation.getCurrentPosition(showPosition);
          function showPosition(position) {
          $("#weather").append('<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 weather"></div>');
           $.simpleWeather({
             location: '('+position.coords.latitude+','+position.coords.longitude+')',
             woeid: '',
             unit: 'f',
             success: function(weather) {
               html = '<h2><i class="icon-'+weather.code+'"></i> <span class="weatherdegclass">'+weather.temp+'&deg;'+weather.units.temp+'</span></h2>';
               html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
           html+='</ul>';
               $(".weather").html(html);
             },
             error: function(error) {
               $("#weather").html('<p>'+error+'</p>');
             }
           });
         }
         });
      </script>
   </body>
</html>

100

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

@font-face {

font-family: 'weather';

src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');

src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),

url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),

url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),

url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');

font-weight: normal;

font-style: normal;

}

#weather i {

color: #fff;

font-family: weather;

font-size: 1.5em;

font-weight: normal;

font-style: normal;

line-height: 1.0;

text-transform: none;

}

.icon-0:before { content: ":"; }

.icon-1:before { content: "p"; }

.icon-2:before { content: "S"; }

.icon-3:before { content: "Q"; }

.icon-4:before { content: "S"; }

.icon-5:before { content: "W"; }

.icon-6:before { content: "W"; }

.icon-7:before { content: "W"; }

.icon-8:before { content: "W"; }

.icon-9:before { content: "I"; }

.icon-10:before { content: "W"; }

.icon-11:before { content: "I"; }

.icon-12:before { content: "I"; }

.icon-13:before { content: "I"; }

.icon-14:before { content: "I"; }

.icon-15:before { content: "W"; }

.icon-16:before { content: "I"; }

.icon-17:before { content: "W"; }

.icon-18:before { content: "U"; }

.icon-19:before { content: "Z"; }

.icon-20:before { content: "Z"; }

.icon-21:before { content: "Z"; }

.icon-22:before { content: "Z"; }

.icon-23:before { content: "Z"; }

.icon-24:before { content: "E"; }

.icon-25:before { content: "E"; }

.icon-26:before { content: "3"; }

.icon-27:before { content: "a"; }

.icon-28:before { content: "A"; }

.icon-29:before { content: "a"; }

.icon-30:before { content: "A"; }

.icon-31:before { content: "6"; }

.icon-32:before { content: "1"; }

.icon-33:before { content: "6"; }

.icon-34:before { content: "1"; }

.icon-35:before { content: "W"; }

.icon-36:before { content: "1"; }

.icon-37:before { content: "S"; }

.icon-38:before { content: "S"; }

.icon-39:before { content: "S"; }

.icon-40:before { content: "M"; }

.icon-41:before { content: "W"; }

.icon-42:before { content: "I"; }

.icon-43:before { content: "W"; }

.icon-44:before { content: "a"; }

.icon-45:before { content: "S"; }

.icon-46:before { content: "U"; }

.icon-47:before { content: "S"; }

</style>

</head>

<body>

jQuery(document).ready(function ($) {

navigator.geolocation.getCurrentPosition(showPosition);

function showPosition(position) {

$("#weather").append('<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 weather"></div>');

$.simpleWeather({

location: '('+position.coords.latitude+','+position.coords.longitude+')',

woeid: '',

unit: 'f',

success: function(weather) {

html = '<h2><i class="icon-'+weather.code+'"></i> <span class="weatherdegclass">'+weather.temp+'°'+weather.units.temp+'</span></h2>';

html += '<ul><li>'+weather.city+', '+weather.region+'</li>';

html+='</ul>';

$(".weather").html(html);

error: function(error) {

$("#weather").html('<p>'+error+'</p>');

}

});

}

});

</script>

</body>

</html>

Leave a Reply Cancel reply