Untitled
Guest
1 week ago
64
Never
  1. class Location {
  2.         constructor(lat, long, accuracy) {
  3.                 this.lat = lat;
  4.                 this.long = long;
  5.                 this.accuracy = accuracy;
  6.                 this.time = new date();
  7.         }
  8.  
  9.         get lat() { return this._lat; }
  10.         set lat(lat) { this._lat = lat; }
  11.         get long() { return this._long; }
  12.         set long(long) { this._long = long; }
  13.         get accuracy() { return this._accuracy; }
  14.         set accuracy(accuracy) { this._accuracy = accuracy; }
  15.         get time() { return this._time; }
  16.         set time(time) { this._time = time; }
  17. }
  18.  
  19.  
  20.  
  21. class Odometer {
  22.         constructor() {
  23.                 this.locations = [];
  24.         }
  25.  
  26.         get locations() { return this._locations; }
  27.         set locations(locations) { this._locations = locations; }
  28.  
  29.         addLocation(lat, long, accuracy) {
  30.                 this._locations.push(new Location(lat, long, accuracy));
  31.         }
  32.  
  33.         getStartLocation() {
  34.                 return this._locations[0];
  35.         }
  36.  
  37.         getCurrentLocation() {
  38.                 return this._locations[this._locations.length - 1];
  39.         }
  40.  
  41.         getTotalDistance() {
  42.                 return this._locations.reduce((result, location, index, array) => {
  43.                         return index < array.length - 1 ? result += this.calcDistance(array[index], array[index + 1]) : result;
  44.                 }, 0);
  45.         }
  46. }
  47.  
  48. class OdometerComponent {
  49.         constructor() {
  50.                 this.location = null;
  51.                 this.status = null;
  52.                 this.map = null;
  53.                 this.odometer = new Odometer();
  54.         }
  55.  
  56.         get location() { return this._location; }
  57.         set location(location) { this._location = location; }
  58.         get status() { return this._status; }
  59.         set status(status) { this._status = status; }
  60.         get map() { return this._map; }
  61.         set map(map) { this._map = map; }
  62.         get odometer() { return this._odometer; }
  63.         set odometer(odometer) { this._odometer = odometer; }
  64.  
  65.         getLocation() {
  66.                 this._location.watchPosition(
  67.                         (position) => {this.updateLocation(position)},
  68.                         (error) => {this.handleLocationError(error)}
  69.                 );
  70.         }
  71.  
  72.         updateLocation(position) {
  73.                 this._odometer.addLocation(position.coords.latitude, position.coords.longitude, position.coords.accuracy);
  74.                 this.toHtml();
  75.         }
  76.  
  77.         handleLocationError(error) {
  78.                 const errorTypes = {
  79.                         0: 'There was an error while retrieving your location.',
  80.                         1: 'The user opted not to share his or her location.',
  81.                         2: 'The browser was unable to determine your location.',
  82.                         3: 'The browser timed out before retrieving the location.'
  83.                 };
  84.                 this._status = errorTypes[error.code];
  85.                 if (error.code === 0 || error.code === 2)
  86.                         this._status += ' - ' + error.message;
  87.                 this.toHtml();
  88.         }
  89.  
  90.         toHtml() {
  91.                 this.createMap();
  92.                 this.showCurrentLocation();
  93.                 this.showOverviewLocations();
  94.         }
  95.  
  96.         createMap() {
  97.                 const latlng = new google.maps.LatLng(this._odometer.getStartLocation().lat,
  98.                         this._odometer.getStartLocation().long);
  99.                 const options = {
  100.                         zoom: 17,
  101.                         center: latlng,
  102.                         mapTypeId: google.maps.MapTypeId.ROADMAP
  103.                 };
  104.                 this._map = new google.maps.map(document.getElementById("map"), options);
  105.                 const image = 'images/azure.png';
  106.                 new google.maps.Marker({
  107.                         position: latlng,
  108.                         map: this._map,
  109.                         icon: image
  110.                 });
  111.         }
  112.  
  113.         addMarker(lat, long) {
  114.                 const latlng = new google.maps.LatLng(lat, long);
  115.                 new google.maps.Marker({
  116.                         position: latlng,
  117.                         animation: google.maps.Animation.DROP,
  118.                         map: this._map
  119.                 });
  120.         }
  121.  
  122.         showCurrentLocation() {
  123.                 const cLoc = this._odometer.getCurrentLocation();
  124.                 document.getElementById("status").innerHTML = "Status: " + this._status;
  125.                 document.getElementById("latitude").innerHTML = "Latitude: " + cLoc.lat.toFixed(4);
  126.                 document.getElementById("longitude").innerHTML = "Longitude: " + cLoc.long.toFixed(4);
  127.                 document.getElementById("accuracy").innerHTML = "Accuracy: " + cLoc.accuracy;
  128.                 document.getElementById("totalDist").innerHTML = "Total distance traveled: " + this._odometer.getTotalDistance().toFixed(0) + " m";
  129.         }
  130.  
  131.         showOverviewLocations() {
  132.  
  133.         };
  134.  
  135.  
  136.  
  137. }
  138.  
  139. function init() {
  140.         const location = navigator.geolocation;
  141.         const odometerComponent = new OdometerComponent();
  142.         if (location){
  143.                 odometerComponent.location = location;
  144.                 odometerComponent.getLocation();
  145.         }
  146.         else
  147.                 odometerComponent.status = 'HTML5 Geolocation is not supported in your browser.';
  148. }
  149.  
  150. window.onload = () => init();
  151.  
  152. function calcDistance(l1, l2) {
  153.         // R is the radius of the earth in meters
  154.         var R = 6371000;
  155.         var deltaLatitude = (l2.lat - l1.lat).toRadians();
  156.         var deltaLongitude = (l2.long - l1.long).toRadians();
  157.         var a = math.sin(deltaLatitude / 2) *
  158.                 math.sin(deltaLatitude / 2) +
  159.                 math.cos(l1.lat.toRadians()) *
  160.                 math.cos(l2.lat.toRadians()) *
  161.                 math.sin(deltaLongitude / 2) *
  162.                 math.sin(deltaLongitude / 2);
  163.         var c = 2 * math.atan2(math.sqrt(a),
  164.                 math.sqrt(1 - a));
  165.         return R * c;
  166. }
  167. number.prototype.toRadians = function () {
  168.         return this * math.PI / 180;
  169. };
  170.  
  171. date.prototype.hhmmss = function () {
  172.         var hh = this.getHours().toString();
  173.         var mm = this.getMinutes().toString(); // getMonth() is zero-based
  174.         var ss = this.getSeconds().toString();
  175.         return (hh[1] ? hh : "0" + hh[0]) + ":" + (mm[1] ? mm : "0" + mm[0]) + ":" + (ss[1] ? ss : "0" + ss[0]); // padding
  176. };