Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Evan Fraser
Evan Fraser
6,789 Points

Finished Build a Mobile Web App Using jQuery Mobile & AJAX , Any ideas on how to add custom location with a form?

I am trying to figure out how to add custom location by entering the city name. My code is below

<!doctype html>
<html>

<head>
    <title>My Weather</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" href="images/icon.png"/>  
    <meta name="apple-mobile-web-app-capable" content="yes" />  


    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">

    <script type="text/javascript">


        var icons = {   "clear-day" : "B ", 
                        "clear-night" : "C ", 
                        "rain" : "R ", 
                        "snow" : "G ", 
                        "sleet" : "X ", 
                        "wind" : "S ", 
                        "fog" :"N ", 
                        "cloudy" : "Y ",
                        "partly-cloudy-day" : "H ", 
                        "partly-cloudy-night" : "I "
                    };

        var cities = {  
                        "new york"      :   {coords: {latitude: 40.672060, longitude: -73.983898}},
                        "los angeles"   :   {coords: {latitude: 34.101422, longitude: -118.341224}},
                        "chicago"       :   {coords: {latitude: 41.879003, longitude: -87.63675}},
                        "san francisco" :   {coords: {latitude: 37.788531, longitude: -122.407237}},
                        "miami"         :   {coords: {latitude: 25.790176, longitude: -80.140133}},
                        "current location" : ""
                     };

        function loadWeather(cityCoords){

            console.log(cityCoords);

            var latlng = cityCoords.coords.latitude + "," + cityCoords.coords.longitude;

            // forecast URL
            var forecastURL = "https://api.forecast.io/forecast/7d94e61948eb1e8dda90cff8207973d7/"+latlng;

            $.ajax({
                url: forecastURL,
                jsonpCallback: 'jsonCallback',
                contentType: "application/json",
                dataType: 'jsonp',
                success: function(json) {
                   console.log(json);
                   $("#current_temp").html(Math.round(json.currently.temperature)+"&#176;F");
                   $("#current_summary").html(json.currently.summary);
                   $("#current_precipitation").html("Precipitation: "+(Math.round(json.currently.precipProbability)*100)+"%");
                   $("#current_humidity").html("Humidity: "+((json.currently.humidity)*100)+"%");
                   $("#current_wind").html("Wind: "+(json.currently.windSpeed)+" mph");
                   $("#current_cloudcover").html("Cloud Cover: "+(Math.round(json.currently.cloudCover)*100)+"%");
                   $("#current_temp").attr("data-icon",icons[json.currently.icon]);

                },
                error: function(e) {
                   console.log(e.message);
                }
            });

        }

        function loadCity(city){
            $("#location").html(city);

            if (city.toLowerCase() == "current location") {
                if ( navigator.geolocation )
                    navigator.geolocation.getCurrentPosition(loadWeather,loadDefaultCity);
                else {
                    loadDefaultCity();
                }

            } else {
                loadWeather(cities[city.toLowerCase()]);
            }

        }

        function loadDefaultCity(){
            loadCity("New York");
        }

        $(document).ready(function(){
            loadCity("Chicago");

            $("a.city").bind("click",function(){
                loadCity($(this).html());
            });
        });

    </script>


</head>

<body>

<div data-role="page">
    <div data-role="panel" id="left-panel" data-theme="c">
        <ul data-theme="d" data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Close</a></li>  
            <li data-role="list-divider">Select a City</li>
                <li ><a href="#" class="city" data-rel="close">Current Location</a></li>
                <li ><a href="#" class="city" data-rel="close">Chicago</a></li>
                <li ><a href="#" class="city" data-rel="close">Los Angeles</a></li>
                <li ><a href="#" class="city" data-rel="close">Miami</a></li>
                <li ><a href="#" class="city" data-rel="close">New York</a></li>
                <li ><a href="#" class="city" data-rel="close">San Francisco</a></li>
        </ul>
    </div><!-- /panel -->

    <div data-role="header" data-position="fixed" data-theme="c">
        <h1>My Weather</h1>
        <a href="#left-panel" data-icon="bars" data-role="button" data-iconshadow="false">Location</a>
    </div>
    <div data-role="content" class="content">
        <h1 id="current_temp" class="icon" data-icon="B ">...&#176;F</h1>
        <p id="current_summary">Condition ...</p>
        <p id="location">Location: ...</p> 
        <p id="current_precipitation">Precipitation: ...</p>
        <p id="current_humidity">Humidity: ...</p>
        <p id="current_wind">Wind: ...</p>
        <p id="current_cloudcover">Cloud Cover: ...</p>
    </div>
</div>


</body>

</html>

1 Answer

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

If you mean a location not in the list you currently have, then you'd need some way to get the lat/longs from a new city.

One way is to use Google's Geocoding API.

e.g. send a request to the following to get back the results for Portland, OR: https://maps.googleapis.com/maps/api/geocode/json?address=Portland&components=administrative_area:OR|country:US

Then, you'd have to access the relevant parts of the result JSON.

For the name:

name = json.results[0].address_components[0].short_name

For the coords:

latitude = json.results[0].geometry.location.lat
longitude = json.results[0].geometry.location.lng

See how you go with that, and let us know if you need any more help.