$29
Assignment #2 Solution
Note: This assignment is supposed to be submitted in teams of two. However, individual submissions are acceptable as well.
Overview
This assignment collects information from two different sources (using the same web source, but different API endpoints) to produce its output. One source provides current weather data for a particular location (in JSON format), and the other provides a forecast for that location (in XML format). The page will also show a Google Map of that same location.
Figure 1 – The completed page
The Main Page
The main page of your application will be relatively simple. It will contain only two text fields and a button (“Go”). When the user clicks this button, your JavaScript code will issue two AJAX requests, using jQuery, and will show the Google map.
Code Listing 1 – The HTML for the main page
<!DOCTYPE html
<html lang="en"
<head
<meta charset="UTF-8"
<meta name="viewport" content="width=device-width, initial-scale=1.0" <meta http-equiv="X-UA-Compatible" content="ie=edge"
<titleConsuming Web Services</title
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"</script
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAf5hWE0cmJYAjW20TQC8y_vK
WJe2urSOI"</script
<script type="text/javascript" src="asmt2.js"</script
<link rel="stylesheet" href="asmt2.css" / <link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" </head
<body
<div id="form"
Latitude/longitude:
<input type="text" name="lat" id="lat" value="43.944847" / <input type="text" name="lon" id="lon" value="-78.891703" / <button id="goButton"Go</button
</div
<div class="container-fluid"
<div id="map-canvas" class="col-sm-6"</div
<div id="weather" class="col-sm-4 col-sm-offset-1"</div <div id="forecast" class="col-sm-11"</div
</div
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"</script
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"</scri
pt
</body
</html
Figure 2 – The page before submission
2Sign-up for API Keys
Both the weather API and Google Maps’ API require that you sign up for API keys. The weather API that we will be using is called APIXU. You can use a throwaway E-Mail for this account, if you like. You can create an account, and an API key, at the following URL:
https://www.apixu.com/signup.aspx
Google Maps requires a Gmail login. It is very likely that you will be using a Google API at some time in the future, since they are so ubiquitous, so this shouldn’t be too much to ask. You can obtain a key for the JavaScript Google Maps API at the following URL:
https://developers.google.com/maps/documentation/javascript/get-api-key
Button Event Handler
Using jQuery, register an event handler for the “Go” button. This event handler will extract the latitude and longitude values from the two text fields, and then will execute three functions, each of which will take the latitude and longitude as arguments:
downloadWeather downloadForecast showMap
Populating the Weather Box
The downloadWeather() function will issue a jQuery-based AJAX request, sent to APIXU’s weather service. This service API can be found at the following URL:
http://api.apixu.com/v1/forecast.json?q=43.944847,-78.891703&key=YOUR KEY GOES HERE
Note: Try this by visiting this URL in your browser before you try accessing it through JavaScript.
The function will extract data from the JSON response and put it into the weather div. A typical JSON response for one of these requests is given in code listing 2. The output should resemble figure 3.
Figure 3 – Contents of the weather DIV with web service data
Code Listing 2 – Example JSON response for the weather API
{
"location": {
"name": "Paris",
"region": "Ile-de-France",
"country": "France",
"lat": 48.87,
"lon": 2.33,
"tz_id": "Europe/Paris",
"localtime_epoch": 1516807287,
"localtime": "2018-01-24 16:21"
},
"current": {
"last_updated_epoch": 1516805199,
"last_updated": "2018-01-24 15:46",
"temp_c": 13.0,
"temp_f": 55.4,
"is_day": 1,
"condition": {
"text": "Partly cloudy",
"icon": "//cdn.apixu.com/weather/64x64/day/116.png",
"code": 1003
},
"wind_mph": 21.7,
"wind_kph": 34.9,
"wind_degree": 200,
"wind_dir": "SSW",
"pressure_mb": 1016.0,
"pressure_in": 30.5,
"precip_mm": 0.1,
"precip_in": 0.0,
"humidity": 67,
"cloud": 75,
"feelslike_c": 10.2,
"feelslike_f": 50.4,
"vis_km": 10.0,
"vis_miles": 6.0
},
"forecast": {
"forecastday": [{
"date": "2018-01-24",
"date_epoch": 1516752000,
"day": {
"maxtemp_c": 12.4,
"maxtemp_f": 54.3,
"mintemp_c": 3.4,
"mintemp_f": 38.1,
"avgtemp_c": 10.6,
"avgtemp_f": 51.0,
"maxwind_mph": 17.2,
"maxwind_kph": 27.7,
"totalprecip_mm": 2.4,
"totalprecip_in": 0.09,
"avgvis_km": 17.9,
"avgvis_miles": 11.0,
"avghumidity": 83.0,
"condition": {
"text": "Light rain shower",
"icon": "//cdn.apixu.com/weather/64x64/day/353.png","code": 1240
},
"uv": 0.4
},
"astro": {
…
}
}]
}
}
Populating the Forecast Table
The downloadForecast() function will issue a jQuery-based AJAX request, sent to
APIXU’s forecast service. This service API can be found at the following URL:
http://api.apixu.com/v1/forecast.json?q=43.944847,-78.891703&days=7&key=YOUR KEY GOES HERE
Note: Try this by visiting this URL in your browser before you try accessing it through JavaScript.
The function will extract data from the JSON response and put it into the weather div. A typical JSON response for one of these requests is given in code listing 3. The output should resemble figure 4. The URL of the images are given in the JSON file.
Figure 4 – Contents of the forecast DIV with web service data
Code Listing 3 – Example JSON response for the forecast API
{
"location": {
"name": "Paris",
"region": "Ile-de-France",
"country": "France",
"lat": 48.87,
"lon": 2.33,
"tz_id": "Europe/Paris",
"localtime_epoch": 1516806911,
"localtime": "2018-01-24 16:15"
},
"current": {
…
},
"forecast": {
"forecastday": [{
"date": "2018-01-24",
"date_epoch": 1516752000,
"day": {
"maxtemp_c": 12.4,
"maxtemp_f": 54.3,
"mintemp_c": 3.4,
"mintemp_f": 38.1,
"avgtemp_c": 10.6,
"avgtemp_f": 51.0,
"maxwind_mph": 17.2,
"maxwind_kph": 27.7,
"totalprecip_mm": 2.4,
"totalprecip_in": 0.09,
"avgvis_km": 17.9,
"avgvis_miles": 11.0,
"avghumidity": 83.0,
"condition": {
"text": "Light rain shower",
"icon": "//cdn.apixu.com/weather/64x64/day/353.png",
"code": 1240
},
"uv": 0.4
},
"astro": {
"sunrise": "08:31 AM",
"sunset": "05:35 PM",
"moonrise": "12:01 PM",
"moonset": "12:24 AM"
}
}, {
"date": "2018-01-25",
"date_epoch": 1516838400,
"day": {
"maxtemp_c": 9.0,
"maxtemp_f": 48.2,
"mintemp_c": 5.4,
"mintemp_f": 41.7,
"avgtemp_c": 8.6,
"avgtemp_f": 47.5,
"maxwind_mph": 10.5,
"maxwind_kph": 16.9,
"t"totalprecip_in": 0.45,
"avgvis_km": 14.7,
"avgvis_miles": 9.0,
"avghumidity": 76.0,
"condition": {
"text": "Moderate rain",
"icon": "//cdn.apixu.com/weather/64x64/day/302.png",
"code": 1189
},
"uv": 0.4
},
"astro": {
"sunrise": "08:30 AM",
"sunset": "05:37 PM",
"moonrise": "12:29 PM",
"moonset": "01:35 AM"
}
}, …]
}
}
Showing the Map
For this part of the assignment, you will use the Google Maps API to display a map of the user’s location. Use the div with id ‘map-canvas’ for this purpose. The code for the showMap() function will be based off of the code found in the following tutorial:
https://developers.google.com/maps/documentation/javascript/exampl es/map-simple.
Figure 5 – The embedded Google Map in the map-canvas DIV
How to Submit
Add your HTML, CSS, and JavaScript files to a ZIP file (e.g.
RandyFortier_100539147_Assignment2.zip) and submit to the Assignment 2 drop box on Blackboard.
