Tuesday, September 4, 2012

Using Weather API in javascript

Yahoo, Google... etc are providing weather report through API's. We can directly use those in html page using jquery and javascript. we can use location id, or location sharing to get weather.

simply create one html file and use the code.
digg on this and find more exciting features.

here is the code.

-----------------------------------------------------------------------------------------------------------------------------

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <title></title>
    <script type="text/javascript">
        function loadXMLDoc() {
        
            var Result = $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20location%3D%2233015%22&format=json", "",
    function (data) {
        display(data);
    });


        }
        function display(data) {
            $("body").html('');
            $("body").append("Sunrise: " + data.query.results.channel.astronomy.sunrise + "<br />");
            $("body").append("SuntSet: " + data.query.results.channel.astronomy.sunset + "<br />");
            $("body").append(data.query.results.channel.item.description + "<br />");
            $("body").append(data.query.results.channel.item.title + "<br />");
        }

    </script>
</head>
<body>
    <div id="myDiv">
        <h2>
            Get weather</h2>
    </div>
    <button type="button" onclick="loadXMLDoc()">
        Get weather</button>
</body>
</html>


-----------------------------------------------------------------------------------------------------------------------



$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20location%3D%2233015%22&format=json", "",
    function (data) {
        display(data);
    });

 this method returns a jason object. "data.query.results.channel". this contains more features. try digg on this.


you can share you location using the following code.

---------------------------------------------------------------------------------------------------------------
 if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(success, errorfn);
            }

 

 function success(position) {
            alert(position);
        }
        function errorfn(error) {

        }

---------------------------------------------------------------------------------------------------------------

some api's does not provide jason so we need to use this code

----------------------------------------------------------------------------------------------------------------

 if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "http://weather.yahooapis.com/forecastrss?w=615702&u=c", true);
            xmlhttp.send();

----------------------------------------------------------------------------------------------------------------------

No comments:

Post a Comment