GPS-Logger/static/gps_logger/js/main.js

const selColor = "#FF5C26";
let d = [{
	label:"Altitude,m",
	data:[], 
	yaxis: 2
},
{
	label:"Speed,km/h",
	data:[]
}];

let options = {
	xaxis: {
		mode: "time",
		tickLength: 5,
		zoomRange: [60 * 1000, 1000 * 3600 * 24 * 365]
	},
	/*selection: {
		mode: "x",
		color: selColor
	},*/
	yaxes: [{
		min: 0,
		zoomRange: false,
		panRange: false
	}, {
		position: "right",
		alignTicksWithAxis: 1,
		min: 0,
		zoomRange: false,
		panRange: false
	}],
	zoom: {
		interactive: true
	},
	pan: {
		interactive: true,
		cursor: "move",
		frameRate: 60
	}
};
let optO = {
	legend : {
		show: false
	},
	series: {
		lines: {
			show: true,
			lineWidth: 1
		},
		shadowSize: 0
	},
	xaxis: {
		//ticks: [],
		mode: "time"
	},
	yaxis: {
		ticks: [],
		autoscaleMargin: 0.1
	},
	selection: {
		mode: "x",
		color: selColor,
		minSize: 0
	}
};

let gps = new GPS();
let plot, overview;

window.onload = function() {
	Cesium.Ion.defaultAccessToken = '<token>';
	
  var extent = {west: -0.2540382220862719, south: 0.6872565916005104, east: 0.6129855406042352, north: 0.9377043806513488};

  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
  Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
  
  bingMapsProvider = new Cesium.BingMapsImageryProvider({
    url: 'https://dev.virtualearth.net',
    key: '<key>',
    mapStyle: Cesium.BingMapsStyle.AERIAL_WITH_LABELS
  });

  viewer = new Cesium.Viewer('map', {
		fullscreenElement: "map",
		terrainProvider : Cesium.createWorldTerrain({
			requestVertexNormals: true,
			requestWaterMask: true
		}),
		//shadows: true
	});
	viewer.scene.globe.enableLighting = true;
	viewer.resolutionScale = 1.2;
  viewer.scene.screenSpaceCameraController.enableTilt = !('ontouchstart' in window);
  viewer.baseLayerPicker.viewModel.selectedImagery = new Cesium.ProviderViewModel({
    name: 'Bing Maps Aerial with Labels',
    iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/bingAerialLabels.png'),
    tooltip: 'Bing Maps aerial imagery with labels',
    creationFunction: function () {
      return bingMapsProvider
    }
  });
	var paths = [];

	
	fetch("markers")
	.then(function(response) {
		return response.json();
	})
	.then(function(jsonResponse) {
		gps.parse(jsonResponse);
		for(const t of gps.tracks) {
			const i = t.info;
			var desc = "Start: <b>" + timeFormat(i.startTime, "datetime") + 
						"</b><br/>Finish: <b>" + timeFormat(i.endTime, "datetime") + "</b><br/>" +
						"Track time (full): "+ timeFormat(i.totalTime) + "<br>" +
						"Track time (mov.): "+ timeFormat(i.movTime) + "<br>" +
						"Alt: " + i.totalAscend.toFixed(1) + "m &uarr;" + i.ascend.toFixed(1) + "m  &darr;" + i.descend.toFixed(1) + "m"+
						"<br/>Distance: "+(i.distance/1000).toFixed(1)+"km<br/>" +
						"top speed: "+i.topSpeed.toFixed(1)+
						"km/h<br/>"+
						"average speed: "+i.avgSpeed.toFixed(1)+"km/h<br/>";

			const col = Cesium.Color.fromCssColorString(i.color)
			var path = viewer.entities.add({
				label : "Track "+i.id,
        id: "track_"+i.id,
        description: desc,
				polyline : {
					positions : t.data.map(p => Cesium.Cartesian3.fromDegrees(p.lng, p.lat, p.alt)),
					width : 5,
					material : new Cesium.PolylineOutlineMaterialProperty({
						color : col,
					}),
					//clampToGround: true,
					depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
						color : Cesium.Color.fromAlpha(col, 0.6),
					}),
					shadows: Cesium.ShadowMode.ENABLED
				}
			});
			paths.push(path);
		}
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function (movement) {
      var pick = viewer.scene.pick(movement.position);
      if (Cesium.defined(pick) && (pick.id._id.match(/track_([0-9]+)/))) {
        var id = parseInt(RegExp.$1);
        var path = paths[id];
        show(id);
      }
    }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

    viewer.flyTo(paths[paths.length - 1], { offset: new Cesium.HeadingPitchRange(0, -90, 0)});
		let regionIndex = 0;
		for(let r=0; r<gps.regions.length; r++) {
      setTimeout(addInfo, (gps.regions.length-1-regionIndex) * 300, bingMapsProvider, viewer, regionIndex, gps.regions[r]);
			regionIndex++;
		}
		const i = gps.getInfo();
		var html =
			"Time (full): "+ timeFormat(i.totalTime) + "<br>" +
			"Time (mov.): "+ timeFormat(i.movTime) + "<br>" +
			"Alt: &uarr;" + (i.ascend/1000).toFixed(1) + "km  &darr;" + (i.descend/1000).toFixed(1) + "km<br>"+
			"Distance: <b>"+(i.distance/1000).toFixed(1)+"km</b><br/>" +
			"Top speed: <b>"+i.topSpeed.toFixed(1) + "km/h</b><br/>"+
			"Avg. speed: "+i.avgSpeed.toFixed(1)+"km/h<br/>"+
			"Data points: "+i.points+"<br/>"+
			"<a href='javascript:show(" + (gps.tracks.length-1) + ")'>Graph</a>";
		
		$(".status").append(html);

	});

	plot = $.plot("#placeholder", d, options);
	overview = $.plot("#overview", d, optO);
	// now connect the two

	$("#placeholder").bind("plotpan", updateOverview);
	$("#placeholder").bind("plotzoom", updateOverview);
	function updateOverview(event, ranges) {
		var axes = plot.getAxes();
		for(var axis in axes) {
			axes[axis].from = axes[axis].min;
			axes[axis].to = axes[axis].max;
		}
		overview.setSelection(axes, true);
	}
	$("#overview").bind("plotselected", function (event, ranges) {
		$.each(plot.getXAxes(), function(_, axis) {
			var opts = axis.options;
			opts.min = ranges.xaxis.from;
			opts.max = ranges.xaxis.to;
		});
		plot.setupGrid();
		plot.draw();
	});
	
	$("#whole").click(function () {
		setZoom(false,false);
	});
	$("#right").click(function () {
		var min = plot.getXAxes()[0].options.min;
		var max = plot.getXAxes()[0].options.max;
		if(min != null && max != null)
			setZoom((min+max)/2, max * 1.5 - min/2);
	});
	$("#left").click(function () {
		var min = plot.getXAxes()[0].options.min;
		var max = plot.getXAxes()[0].options.max;
		if(min != null && max != null)
			setZoom(min * 1.5 - max/2, (min+max)/2);
	});
}

let firstShow = true;

function show(id) {
	if(firstShow) {
		firstShow = false;
		
		d[0].data = smoothOut(gps.data.map(v => v.alt), 0.85);
		d[1].data = smoothOut(gps.data.map(v => v.speed), 0.85);
		
		for(let i=0; i<gps.data.length; i++) {
			const cur = gps.data[i];
			if((cur.timeDiff > 60 && cur.speed < 0.5) || cur.speed === null) {
				d[0].data[i] = null;
				d[1].data[i] = null;
			}
			d[0].data[i] = [cur.timestamp * 1000, d[0].data[i]];
			d[1].data[i] = [cur.timestamp * 1000, d[1].data[i]];
		}
		let opts = plot.getXAxes()[0].options;
		opts.panRange = [
			gps.data[0].timestamp * 1000,
			gps.data[gps.data.length-1].timestamp * 1000
		];
		
		plot.setData(d);
		plot.setupGrid(); //only necessary if your new data will change the axes or grid
		plot.draw();
		overview.setData(d);
		overview.setupGrid(); //only necessary if your new data will change the axes or grid
		overview.draw();
		
		for(let t of gps.tracks) {
			$("#tracks").append("<li><input type='button' onclick='setZoom("+t.info.startTime*1000+","+t.info.endTime*1000+")' value='" + timeFormat(t.info.startTime, "date") + " " + (t.info.distance/1000).toFixed(1) + "km'</li>");
		}
	}
	
	$("#shadow").css("visibility", "visible");
	$("#frame").css("visibility", "visible");
	console.log(id);
	
	let start = gps.tracks[id].info.startTime*1000;
	let end = gps.tracks[id].info.endTime*1000;
	
	setZoom(start,end);
	
	$("#track").click(function () {
		setZoom(start,end);
	});
};
function hide() {
	$(".popup").css("visibility", "hidden");
};
function setZoom(Xmin, Xmax) {
	var opts = plot.getXAxes()[0].options;
	if(Xmax==false) {
		Xmax = +new Date() - 60 * new Date().getTimezoneOffset() * 1000;
	}
	if(Xmin==false) {
		Xmin = d[0].data[0][0];
		overview.clearSelection();
	} else {
		overview.setSelection({ xaxis: { from: Xmin, to: Xmax}});
	}
	opts.min=Xmin;
	opts.max=Xmax;

	plot.setupGrid();
	plot.draw();
	plot.clearSelection();

	return false;
}

function addInfo(bingMapsProvider, viewer, id, data) {
  var url = `https://dev.virtualearth.net/REST/v1/LocationRecog/${data.lat.toFixed(6) + "," + data.lng.toFixed(6)}?radius=2&top=1&c=de-DE&includeEntityTypes=address&key=${bingMapsProvider._key}&output=json`;
  fetch(url).then(res=>res.json()).then(function(result) {
    if (result.statusDescription === 'OK') {
      const address = result?.resourceSets[0]?.resources[0]?.addressOfLocation[0];
			if (address) {

        let txt = address.locality + " " + address.neighborhood;
        if (!address.locality && !address.neighborhood) {
          txt = address.adminDivision;
        }
        if (address.countryIso2 != "DE") {
          txt += " " + address.countryIso2;
        }

				$('.sidebar').append("<div class='info' id='info_" + id + "'>" + 
					timeFormat(data.timestamp, "short") + "<br>" +
          txt + "<br><b>" +
					(data.distance/1000).toFixed(1) + " km</b></div>");
					
				$('#info_'+id).click(function() {
          viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(data.lng, data.lat, data.distance),
            offset: new Cesium.HeadingPitchRange(0, -90, 0)
          });
				});
			} else {
				console.log('No results found');
			}
		} else {
			console.log('Geocoder failed due to: ' + status);
		}
	});
}	

function bindInfoWindow(path, map, infoWindow, html) {
	google.maps.event.addListener(path, 'click', function(e) {
		infoWindow.setContent(html);
		console.log(e);
		infoWindow.setPosition(e.latLng);
		infoWindow.open(map);				
	});
	google.maps.event.addListener(path, 'mouseover', function() {
		path.setOptions({
			zIndex: 3,
			strokeWeight: 6
		});
	});
	google.maps.event.addListener(path, 'mouseout', function() {
		setTimeout(function() {
			path.setOptions({
				zIndex: 2,
				strokeWeight: 4
			});
		}, 1000);
	});
}