Programming Exercise III:
A Location-Based Service (LBS) Using AJAX and HTML5 Technologies

(Industry-Level, Second-to-None Comprehensive Specifications)


Absolutely no copying others’ works

Development Requirements
When start developing the exercise, follow the two requirements below:

Due Date and Submission Methods
Due on or before Wednesday, May 03, 2017 in class and have completed the following two tasks: Note that you are allowed to use any languages and tools for this exercise, but the exams will focus on LAMP and AJAX technologies unless otherwise specified.



Objectives
Design and implement a location-based service (LBS) using HTML5, LAMP, and AJAX technologies. Two themes of this exercise are (i) using HTML5 and LAMP to create a location-based service and (ii) using AJAX to make the LBS more interactive, interesting, and user-friendly.



AJAX (Asynchronous JavaScript and XML)
The AJAX is used to create advanced web applications. It is the art of exchanging data with a server, and updating parts of a web page—without reloading the whole page. AJAX is not a new programming language, but a new way to use existing standards. The technologies include:
  • HTML,
  • JavaScript,
  • XML, and
  • MySQL database.



Location-Based Service (LBS)
A system structure of generic location-based services includes five major components:
  1. Mobile handheld devices, which are small computers that can be held in one hand. For most cases, they are smartphones. However, desktop computers will be used to grade and demonstrate this exercise instead.
  2. Positioning system, which is a navigation satellite system that provides location and time information to anyone with a receiver. This exercise uses HTML5 Geolocation to find the users’ locations.
  3. Mobile and wireless networks, which relay the query and location information from devices to service providers and send the results from the providers to devices.
  4. Service providers, which provide the location-based services such as location-aware advertisements.
  5. Geographical data providers, which are databases storing a huge amount of geographical data such as information about restaurants and gas stations. One example is GeoNames.

One example of LCSs is Foursquare.



HTML5 Geolocation
The HTML5 Geolocation API allows the web page to receive the geographical position of a mobile user pending permission. The following demonstration shows how to (i) get the user’s latitude and longitude, (ii) mark the user’s position on a map, and (iii) draw a route between two locations.


The following program shows how to find the user’s current latitude and longitude:

getCoord.html
<!DOCTYPE HTML>
<html>
 <body>
  Click the button to get your coordinates:  
  <button onclick="getLocation( )">Get Them!</button>
  <p id="demo"></p>

  <script>
   var  x = document.getElementById( "demo" );

   function  getLocation( ) {
    if ( navigator.geolocation ) 
     navigator.geolocation.getCurrentPosition( showPosition, showError );
    else
     x.innerHTML = "Geolocation is not supported by this browser.";
   }

   function  showPosition( position ) {
    x.innerHTML  = "Latitude: "  + position.coords.latitude; 
    x.innerHTML += "Longitude: " + position.coords.longitude;
   }

   function  showError( error ) {
    switch ( error.code ) {
     case error.PERMISSION_DENIED:
      x.innerHTML = "User is denied the request for Geolocation.";
      break;
     case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable.";
      break;
     case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out.";
      break;
     case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred.";
      break;
    }
   }
  </script>
 </body>
</html>

The following program shows how to build map mashups:

markMap.html
<!DOCTYPE HTML>
<html>
 <body>
  Click the button to mark your position:
  <button onclick="getLocation( )">Mark It!</button>
  <p id="mapholder"></p>

  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script>
   var  mapholder = document.getElementById( "mapholder" );

   function  getLocation( ) {
    if ( navigator.geolocation )
     navigator.geolocation.getCurrentPosition( showPosition, showError );
    else
     mapholder.innerHTML = "Geolocation is not supported by this browser.";
   }

   function  showPosition( position ) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng( lat, lon );
    mapholder.style.height ='400px';
    mapholder.style.width  ='700px';

    var  myOptions = {
     center: latlon,
     zoom: 14,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     mapTypeControl: false,
     navigationControlOptions: {
      style: google.maps.NavigationControlStyle.SMALL
     }
    };

    var  map = new google.maps.Map( document.getElementById( "mapholder" ), myOptions );
    var  marker = new google.maps.Marker( {
     position: latlon,
     map: map,
     title: "You are here!" }
    );
   }

   function  showError( error ) {
    switch( error.code ) {
     case error.PERMISSION_DENIED:
      mapholder.innerHTML = "User is denied the request for Geolocation.";
      break;
     case error.POSITION_UNAVAILABLE:
      mapholder.innerHTML = "Location information is unavailable.";
      break;
     case error.TIMEOUT:
      mapholder.innerHTML = "The request to get user location timed out.";
      break;
     case error.UNKNOWN_ERROR:
      mapholder.innerHTML = "An unknown error occurred.";
      break;
    }
   }
  </script>
 </body>
</html>

The following program shows how to draw a direction:

direction.html
<!DOCTYPE HTML>
<html>
 <head>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
  </script>
  <script>
   var  directionDisplay;
   var  directionsService = new google.maps.DirectionsService( );
   var  map;

   function  initialize( ) {
    directionsDisplay = new google.maps.DirectionsRenderer( );
    var  GF = new google.maps.LatLng( 47.92525699999999, -97.032855 );
    var  mapOptions = {
     zoom: 14,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     center: GF
    }
    map = new google.maps.Map( document.getElementById('map_canvas'), mapOptions);
    directionsDisplay.setMap( map );
   }

   function calcRoute( ) {
    var  start = document.getElementById('start').value;
    var  end   = document.getElementById('end').value;
    var  request = {
     origin: start,
     destination: end,
     travelMode: google.maps.DirectionsTravelMode.WALKING
    };
    directionsService.route( request, function( response, status ) {
     if ( status == google.maps.DirectionsStatus.OK )
      directionsDisplay.setDirections( response );
     } );
   }
  </script>
 </head>

 <body onload="initialize( )">
  <div>
   Start:
   <select id="start" onChange="calcRoute( );">
    <option value="streibel hall, und, nd">Streibel Hall</option>
    <option value="ray richards golf course, grand forks, nd">Ray Richards</option>
    <option value="ralph engelstad arena,nd">The Ralph</option>
    <option value="university park, grand forks, nd">University Park</option>
    <option value="cabela, east grand forks, mn">Cabela</option>
    <option value="city hall, grand forks, nd">City Hall</option>
    <option value="columbia mall, grand forks, nd">Columbia Mall</option>
   </select>

   End:
   <select id="end" onChange="calcRoute( );">
    <option value="ray richards golf course, grand forks, nd">Ray Richards</option>
    <option value="ralph engelstad arena,nd">The Ralph</option>
    <option value="university park, grand forks, nd">University Park</option>
    <option value="streibel hall, und, nd">Streibel Hall</option>
    <option value="cabela, east grand forks, mn">Cabela's</option>
    <option value="city hall, grand forks, nd">City Hall</option>
    <option value="columbia mall, grand forks, nd">Columbia Mall</option>
   </select>
  </div>
  <div id="map_canvas" style="width:96%;height:400px"></div>
 </body>
</html>




Requirements
This is an open exercise, so the requirements are loosened. This system consists of two themes: (i) location-based services and (ii) AJAX. The proposed location-based service includes the following features:


Evaluations
The following features will be considered when grading: