COMP 20: Web Programming

Assignment 2: The Private Car Service

Due: Tuesday, March 5th

This assignment is worth 16 points. You must work on this assignment individually.


  1. Use a JSON API.
  2. Use a third-party JavaScript API (in this case, Google Maps).
  3. Use the HTML5 geolocation API to determine your location.
  4. Use the XMLHttpRequest object to make requests and manage the response data.


For this assignment, you will be building the front-end of a private car a la ride sharing service. Most of you will be passengers. A lucky few of you, randomly selected, will be drivers / vehicles. I cannot provide you the number of passengers or drivers. The idea: passengers will be seeking vehicles, drivers will be seeking customers (passengers). You will develop a web page that:

  1. Retrieves your current location (latitude and longitude) and sends it to a server via ride request API that I created.
  2. Retrieves and displays the locations of vehicles OR passengers on a map, depending on who you are. Your web page will need to handle both cases (showing locations of vehicles or passengers on map) as it is possible that I can change your status from a passenger to a driver, vice versa.
  3. Upon clicking on your marker (i.e., where you are currently located), show how far away you are to (1) the nearest vehicle or passenger --depending on who you are, and (2) the Weinermobile --if it exists!


  1. The HTML file must be named index.html in a folder named liftknockoff in your private Git repository. You can write your JavaScript in the HTML file.
  2. You must use at least one (1) CSS file. You can name the file whatever you want.
  3. You must use the JavaScript navigator.geolocation object to retrieve your geolocation information (latitude and longitude).
  4. You must use the JavaScript XMLHttpRequest object to make requests (i.e., send your information) and manage the response data.
  5. After retrieving your location using the navigator.geolocation JavaScript object, you must display your location on the map with unique marker (i.e., using an image of your choice) with an info window showing:
  6. You must display locations of all passengers OR vehicles on the map, depending on who you are. If you are marked as a driver / vehicle, display location of all passengers. If you are a passenger, display location of all vehicles. All vehicles on the map shall use this icon: Car. You can use any picture as marker icon for a passenger; all passenger markers shall use the same picture as marker icon on map.
  7. If Weinermobile exists, then it shall be marked at proper location on map using this icon: Weinermobile
  8. Clicking on a vehicle or passenger marker will display vehicle or passenger username and mile(s) away from you in an info window.


This assignment will require the use of two external APIs:

  1. The ride request API to send your location information and to retrieve information on passengers or vehicles:
  2. The Google Maps API. Please refer to my notes at Working examples are available at NOTES: the geolocation_map.html example requires the page to be served by an actual web server. Also, you will now need to create an API key to use Google Maps API version 3 at can see geolocation_map.html in action at

The Ride Request API

The ride request API is HTTP POST only. It takes in three parameters and will return a JSON feed of the locations of vehicles or passengers, depending on what you have been assigned as, if the three parameters are legitimate.

If you successfully send the three inputs as a passenger, you will receive a JSON that looks like the following (example response): {"vehicles":[{"_id":"589bd30f8451126182dfbc62","username":"uOWuyLrd","lat":10.1,"lng":10.2,"created_at":"2019-02-09T02:25:19.575Z"}]}

If you successfully send the three inputs as a driver / vehicle, you will receive a JSON that looks like the following (example response): {"passengers":[{"_id":"589bd3258451126182dfbc63","username":"dwR3TbOH","lat":20.3,"lng":20.4,"created_at":"2019-02-09T02:25:41.166Z"}]}

If you do not send the three inputs correctly, you will receive the following JSON: {"error":"Whoops, something is wrong with your data!"}

Important: Cross-Origin Resource Sharing (CORS) is enabled for this API!

The Weinermobile

Important Notes

Getting Started

  1. Create a new folder named liftknockoff in your folder comp20-username on your computer (the one you have been using since Lab 4).
  2. Follow the Google Maps JavaScript API tutorial "Getting Started" at

Executing HTTP POST via XMLHttpRequest

In order to execute HTTP POST using the JavaScript XMLHttpRequest object, you need to add a parameter to the HTTP request header: xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); where xhr is an instance of XMLHttpRequest. See for more information.

Also, the parameter to send via xhr.send() must the in the following format: "username=YOUR_USERNAME&lat=YOUR_LATITUDE&lng=YOUR_LONGITUDE" (with the double quotes). This is standard URI convention. Remember replace YOUR_LATITUDE and YOUR_LONGITUDE using string concatenation!

Calulating the Distance Between Two Geopoints

There are two ways to calculate the distance between two geopoints, choose one:

  1. Use the classic Haversine Formula. The formula is provided and analyzed at Also, you are encouraged to use the JavaScript implementation of the Haversine Formula on Stack Overflow but please do cite it in your or in your code:
  2. Use google.maps.geometry.spherical.computeDistanceBetween(latLngA, latLngB);. See documentation at

Remember, the distance must be in miles, not meters.


Every assignment shall include a README file that describes the work. This description must:

  1. Identify what aspects of the work have been correctly implemented and what have not.
  2. Identify anyone with whom you have collaborated or discussed the assignment.
  3. Say approximately how many hours you have spent completing the assignment.
  4. Be written in either text format (thus README.txt) or in Markdown (thus No other formats will be accepted.

Viewing Your Work and Submitting the Assignment

Using the JavaScript Geolocation API requires your page to served by an actual web server. Alas, simply opening the index.html page on a web browser will not work for this assignment (although it may now work on Safari or Firefox --regardless, it is bad practice). One way to serve your page is to run Python's simple HTTP server in the folder of your work. That is:

% cd comp20-XXXXX/liftknockoff; # where XXXXX is the name of your private GitHub repository
% python -m SimpleHTTPServer

By default, a simple web server will open up on port 8000. Go to http://localhost:8000 on your favorite web browser to test your work.

Do not serve your work via the gh-pages branch of your private GitHub repository.



This assignment is worth 16 points.