COMPX322-20A Assignment Three
Due Date: Friday June 12th, 5pm
Using and Combining Web Services
For this coursework you are to implement a web page that uses several
different APIs and web services to provide information to travellers to New
Zealand. This will consist of:
• HTML without in-line formatting, and with well-formed open and
closing tags for HTML elements
• Cascading Style Sheets (CSS)
• JavaScript and PHP to issue the requests to the APIs and handle
returned data
• DHTML so that all data is displayed without page reload
• Use of AJAX, fetch and cURL (as described) to obtain data from the
following APIs:
- leaflet for the map
− mapquest for geocoding
- sunrise-sunset for sunrise and sunset times
- openweathermap for weather
• Use of objects to store data
IMPORTANT: For each of the API requests you will need to follow the
instructions on which methods to use for the access and which data types to
use for the returned data – these are part of the assessment requirements.
Application description
• the application will be implemented in the form of a dynamic web page
• when the page loads it displays a map showing a town in New Zealand
(it doesn’t matter which the default town is).
• the user can enter the name of a town that they are interested in and
the map will update to show this town
• in addition the sunrise and sunset times for the town are displayed as
well as current weather information
• the application keeps track of towns the user has viewed and provides
a list of these which can be clicked to redisplay the relevant map
For example, if the user enters “Queenstown” as the town they are interested
in, the web page may display something like:
The ‘Queenstown’ label under recent searches will provide a shortcut for this
town during a browsing session. Each time the user searches for a new town
the map will display the new result, along with new sunset/sunrise and
weather info and it should be added to this list. This is implemented through
the use of an object which you must create to store the town details (name,
lon, lat), this ensures that when a user clicks on one of the links the geocode
from the object is used, there is no need to request it again from the API.
(note: sunrise/sunset and weather information should be retrieved
dynamically each time.)
What you need to do:
For each of the web service requests you should follow the instructions below
MAP
Use the leaflet map to display the selected town (you will need to use
geocoding to get the required longitude and latitude).
Details of how to use the leaflet map can be found here: https://leafletjs.com/examples/quick-start/
GEOCODE
Use the mapquest API for geocoding, you will need to register for an API key
to use the service. You should ensure that the towns it looks for are in New
Zealand, without requiring the user to enter ‘NZ’ as part of their search term.
Details of how to use the geocode API can be found here: https://developer.mapquest.com/documentation/geocoding-api/
Requests to this API must be made using fetch in your JavaScript (no PHP
required), data must be returned in JSON format.
SUNRISE/SUNSET
Use the sunrise-sunset API for getting this information. Details of how to use
the API can be found here: https://sunrise-sunset.org/api
Requests to this API must be made using fetch in your JavaScript to a PHP
script which uses cURL, data must be returned in JSON format.
NOTE: All times are in UTC and summer time adjustments are not included in
the returned data, you will need to perform the necessary adjustments before
displaying the data
WEATHER
Use the openweathermap API for this information. You will need to register
for an API key. Details of how to use the API can be found here: https://openweathermap.org/current#geo
Requests to this API must be made using an AJAX request from your JavaScript
to a PHP script which uses cURL, data must be returned in XML format.
https://sunrise-sunset.org/api
What to submit and how
All of your material for this assignment must be submitted electronically
using Moodle.
Assuming that all parts of your application are within a directory called
compx322assn3 within your course_html directory.
Compress this folder using gzip/zip etc. to create a comp333assn3.zip or
comp322assn3.tar.xz file.
In the COMP322 Moodle site, you will see a link Assignment 3 to the
submission page. This link allows you to upload your zip file. You can do this as
many times as you want up to the submission deadline for the assignment.
When you submit a file Moodle will ask you to confirm that what you have
submitted is your own work, and will provide you with a ‘receipt’ that
establishes that you have indeed submitted something.
How your work will be assessed
The assignment will be marked out of 50 as follows:
• Application meets minimum functional requirements 25 marks
• Fetch requests used to request geocoding data in JSON
format 5 marks
• Fetch and cURL requests used to request and retrieve
Sunset/Sunrise information in JSON format 5 marks
• AJAX and cURL requests used to request weather information in
XML format 5 marks
• JavaScript object is used to store town information 5 marks
• HTML and CSS are used for appropriate design and layout 3 marks
• Code is well structured and is commented appropriately 2 marks
Optional Extras
There are lots of ways you can enhance this to make it more interesting. Start by
using additional features and data from the APIs above, then try and find additional
relevant APIs and see how you can include that data as well.