i making basic web-based weather app, detects current weather conditions in user's location. current code far work, missing important feature - want background of web page change according user's location , weather conditions. instance - if user in new york , weather sunny, display new york based popular image(ex: times square) along sunny skies body background. i've searched several apis haven't found meets needs.
in current code, i'm using ipinfo.io user's location , openweathermap weather conditions.
this pen has code (note - code units hasn't been added yet), , here's js bit -
var lat = 0.0, lon = 0.0; var testurl = 'http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=2de143494c0b295cca9337e1e96b00e0'; var myurl = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&appid="ae0acb60e8db4952e081c2fb470a1b23"'; var city = '', state = '', country = '', postal = 0; //if (navigator.geolocation) { // /* geolocation available */ // navigator.geolocation.getcurrentposition(function (position) { // lat = position.coords.latitude; // lon = position.coords.longitude; // console.log("latitude = " + lat); // console.log("longitude = " + lon); // // display(position.coords.latitude, position.coords.longitude); // }); // //} else { // /* geolocation not available */ // $("#jumbotron").html("geolocation not available"); // //} //get co-ordinates using ipinfo.io $.getjson('http://ipinfo.io', function (data) { console.log(data); var loc = data.loc; lat = loc.split(",")[0]; lon = loc.split(",")[1]; display(lat, lon); city = data.city; state = data.region; country = data.country; postal = parseint(data.postal, 10); }) function display(x, y) { $("#pos1").html("<b>" + x + "</b>"); $("#pos2").html("<b>" + y + "</b>"); } //function calculate wind direction degrees function degtocompass(num) { //num = parseint(num, 10); console.log("inside degtocompass = " + num); var val = math.floor((num / 22.5) + 0.5); var arr = ["n", "nne", "ne", "ene", "e", "ese", "se", "sse", "s", "ssw", "sw", "wsw", "w", "wnw", "nw", "nnw"]; return arr[(val % 16)]; } //function return current temperature function converttemp(currtemp) { //get celsius kelvin return math.round(currtemp - 273.15); } $("button").click(function () { console.log("in latitude = " + lat); console.log("in longitude = " + lon); //prepare api call $.ajax({ url: 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&appid=ae0acb60e8db4952e081c2fb470a1b23', //url: testurl, type: 'get', // http method, can post put delete etc data: {}, // additional parameters here datatype: 'json', success: function (data) { console.log(data); //---------get clipart--------------- var piclink = 'http://openweathermap.org/img/w/'; var picname = data.weather[0].icon; piclink += picname + ".png"; $("#picture").empty().append('<img src="' + piclink + '">'); //----------get temperature----------- var curtemp = converttemp(data.main.temp); console.log("current temp = " + curtemp); //$("#temp").empty().append("<b>" + curtemp + "</b>"); $("#picture").append("<b>" + curtemp + "</b>"); //----------get place---------------------- var area = city + ", " + state + ", " + country; $("#area").empty().append("<b>" + area + "</b>"); //----------get weather conditions------------ $("#conditions").empty().append("<b>" + data.weather[0].description + "</b>"); //----------get wind speed------------ //get wind direction var windspeed = degtocompass(data.wind.deg); //add wind speed windspeed += ' ' + data.wind.speed; //display wind speed $("#wind-speed").empty().append("<b>" + windspeed + "</b>"); }, error: function (err) { alert(err); }, beforesend: function (xhr) { //xhr.setrequestheader("x-mashape-authorization", "32rouuaq9wmshfk8uixfd5dmc6h7p1lqdzsjsnxkb5bqtbtelk"); // enter here mashape key } }); });
Comments
Post a Comment