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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<!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+'°'+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> |