website
/
GPS-Logger


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
							<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Arduino/PHP/MySQL & Google Maps</title>
		<script language="javascript" type="text/javascript" src="../flot/jquery.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=<KEY>"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

		$(window).resize(function() {
			$('#map').height($(window).height());
			$('#map').width($(window).width());
		});

    function load() {
				$('#map').height($(window).height());
				$('#map').width($(window).width());
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(51.44, 11.0),
        zoom: 13,
        mapTypeId: 'terrain'
      });
			var bikeLayer = new google.maps.BicyclingLayer();
			bikeLayer.setMap(map);
      var infoWindow = new google.maps.InfoWindow;
			$.ajax({
				type: 'POST',
				url: 'gps_ajax.php',
				data: {},
				success: function(txt) {
					var data = JSON.parse(txt);
					var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
					var labelIndex = 0, startIndex = 0, distances = [0], timeDiff = [1], speed = [0];
					
					for (var i = 1; i < data.length; i++) {

						distances[i] = distance(data[i-1].lat, data[i-1].lng, data[i].lat, data[i].lng);
						if(isNaN(distances[i])) distances[i] = 0;
						timeDiff[i] = data[i].timestamp - data[i-1].timestamp;
						speed[i] = distances[i] / timeDiff[i] * 3.6;
						
						if(timeDiff[i] > 60 || i == data.length - 1) {
							
							var label = labels[labelIndex++ % labels.length];
							var html = "Start: <b>" + data[startIndex].format + "</b><br/>" + data[startIndex].alt + "m<br/>Finish: <b>" + data[i-1].format + "</b><br/>" + data[i-1].alt + "m";
							var startMarker = new google.maps.Marker({
								map: map,
								position: data[startIndex],
								label: label
							});
							bindInfoWindow(startMarker, map, infoWindow, html);
							
							var color = getRandomColor();
							var path = new google.maps.Polyline({
								map: map,
								path: data.slice(startIndex, i),
								strokeColor: color,
								strokeOpacity: 1,
								strokeWeight: 4,
								zIndex: 1
							});
							google.maps.event.addListener(path, 'mouseover', function(event) {
							 this.setOptions({
									 zIndex: 2,
									 strokeWeight: 6
							 });
							});	
							google.maps.event.addListener(path, 'mouseout', function(event) {
							 this.setOptions({
									 zIndex: 1,
									 strokeWeight: 4
							 });
							});
							var dis = distances.slice(startIndex, i).reduce((a, b) => a + b, 0).toFixed(1);
							var tsp = Math.max.apply(Math, speed.slice(startIndex, i)).toFixed(2);
							var avg = (dis / (data[i-1].timestamp - data[startIndex].timestamp) * 3.6).toFixed(2);
							$("#info").html($("#info").html()+"<div style='border-radius: 25px;opacity:.7;padding:5px;margin:5px;display: inline-block;background-color:"+color+"'>"+html+"<br/>Distance: "+dis+"m<br/>top speed: "+tsp+"km/h<br/>average speed: "+avg+"km/h</div>");
							startIndex = i;
						}
						var circle = new google.maps.Circle({
							strokeColor: '#FF0000',
							strokeOpacity: 0.0,
							strokeWeight: 0,
							fillColor: '#FF0000',
							fillOpacity: 0.01,
							map: map,
							center: data[i],
							radius: data[i].hdop / 100,
							zIndex: 0
						});
					}
				}
			});
    }
    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }
		function getRandomColor() {
			var letters = '3456789ABCDEF'.split('');
			var color = '#';
			for (var i = 0; i < 6; i++ ) {
				color += letters[Math.floor(Math.random() * 13)];
			}
			return color;
		}
		/*function convertTimestamp(sqlTs) {
			var t = sqlTs.split(/[- :]/);
			return {
				ts: new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]),
			  format: t[2]+"."+t[1]+"."+t[0]+" "+t[3]+":"+t[4]+":"+t[5]
			};
		}*/
	function distance (lat1, lon1, lat2, lon2) {
	 
		// Convert degrees to radians
		lat1 = lat1 * Math.PI / 180.0;
		lon1 = lon1 * Math.PI / 180.0;
	 
		lat2 = lat2 * Math.PI / 180.0;
		lon2 = lon2 * Math.PI / 180.0;
	 
		// radius of earth in metres
		var r = 6378100;
	 
		// P
		var rho1 = r * Math.cos(lat1);
		var z1 = r * Math.sin(lat1);
		var x1 = rho1 * Math.cos(lon1);
		var y1 = rho1 * Math.sin(lon1);
	 
		// Q
		var rho2 = r * Math.cos(lat2);
		var z2 = r * Math.sin(lat2);
		var x2 = rho2 * Math.cos(lon2);
		var y2 = rho2 * Math.sin(lon2);
	 
		// Dot product
		var dot = (x1 * x2 + y1 * y2 + z1 * z2);
		var cos_theta = dot / (r * r);
	 
		var theta = Math.acos(cos_theta);
	 
		// Distance in Metres
		return r * theta;
	}

    //]]>

  </script>

  </head>

  <body onload="load()" style="margin: 0; padding: 0;">
    <div id="map" style="width: 800px; height: 800px"></div>
	<div id="info" style="position:absolute; bottom:0; left:0;"></div>
  </body>

</html>