Sync with latest changes (b08791bc) · Commits · school / Capstone Design / 02 / location-history-visualizer

index.css

+85 −13

Original line number	Diff line number	Diff line
		body {
		padding: 0;
		margin: 0;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		/* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
		font-size: 14px;
		}

		@@ -14,6 +14,14 @@ body.working {
		cursor: progress;
		}

		a:hover {
		text-decoration: underline;
		}

		p {
		line-height: 22px;
		}

		.visualizer {
		height: 100%;
		width: 100%;
		@@ -49,16 +57,19 @@ body.working {
		.content {
		display: table-cell;
		vertical-align: middle;
		padding: 10px 0;
		}

		.content-box {
		margin: 0 auto;
		width: 50%;
		width: 80%;
		min-width: 300px;
		max-width: 600px;
		background-color: rgba(255,255,255,0.9);
		padding: 10px;
		border-radius: 10px;
		border-radius: 8px;
		max-height: 85vh;
		overflow-y: scroll;
		}

		h2 {
		@@ -69,9 +80,13 @@ h2 {
		padding: 10px;
		text-align: center;
		background-color: #ffeb3b;
		border-radius: 8px;
		}

		.credit {
		padding-top: 4px;
		margin-top: 12px;
		border-top: 1px solid #ccc;
		font-size: 0.8em;
		text-align: center;
		}
		@@ -85,10 +100,6 @@ h2 {
		text-align: center;
		}

		#done {
		cursor: pointer;
		}

		#controls {
		z-index: 99999;
		position: absolute;
		@@ -98,7 +109,7 @@ h2 {
		div will always reveal the correct top part. When we expand it later (on hover),
		we set height back to auto, so that all the content is shown correctly. Slightly
		hacky, yes, but it appears to be working in all browsers. A Good Thing. */
		height: 171px;
		height: 133px;
		left: 0px;
		margin: 0px 10px;
		padding: 3px 16px 5px;
		@@ -107,7 +118,7 @@ h2 {
		}

		.map-active #controls {
		bottom: -145px;
		bottom: -106px;
		}

		#controls:hover {
		@@ -164,13 +175,13 @@ h2 {

		/* http://tobiasahlin.com/spinkit/ */

		.spinner {
		.loading {
		margin: 20px auto 0;
		width: 70px;
		text-align: center;
		}

		.spinner > div {
		.loading > div {
		width: 18px;
		height: 18px;
		background-color: #333;
		@@ -184,12 +195,12 @@ h2 {
		animation-fill-mode: both;
		}

		.spinner .bounce1 {
		.loading .bounce1 {
		-webkit-animation-delay: -0.32s;
		animation-delay: -0.32s;
		}

		.spinner .bounce2 {
		.loading .bounce2 {
		-webkit-animation-delay: -0.16s;
		animation-delay: -0.16s;
		}
		@@ -208,3 +219,64 @@ h2 {
		-webkit-transform: scale(1.0);
		}
		}

		/* email signup */
		.email-form {
		margin: 16px 0;
		text-align: center;
		}

		input#email {
		font-size: 16px;
		font-family: PTSans, Helvetica, Arial, sans-serif;
		border-radius: 2px;
		background-color: white;
		padding: 6px 6px;
		min-width: 200px;
		border: 1px solid #ccc;
		outline: 0;
		}

		button#launch {
		font-family: PTSans, Helvetica, Arial, sans-serif;
		display: inline-block;
		padding: 6px 12px;
		margin-bottom: 0;
		font-size: 14px;
		font-weight: normal;
		line-height: 1.42857143;
		text-align: center;
		white-space: nowrap;
		vertical-align: top;
		-ms-touch-action: manipulation;
		touch-action: manipulation;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		background-image: none;
		border: 1px solid transparent;
		border-radius: 4px;
		background-color: #1080f2;
		border-radius: 2px;
		color: white;
		font-family: PTSans;
		font-weight: 700;
		text-transform: uppercase;
		transition: 0.3s;
		outline: 0;
		}

		button#launch:active, button#launch:focus, button#launch:hover {
		background-color: #273140;
		color: #fff;
		box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
		}

		div.disclaimer {
		color: #B7B7B7;
		font-size: 0.9em;
		margin-top: 8px;
		font-style: italic;
		}

index.html

+22 −24

Original line number	Diff line number	Diff line
		<!DOCTYPE html>
		<html>
		<head>
		<title>location-history-visualizer</title>
		<title>Location History Visualizer – Heatmap</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="description" content="Visualize your collected Google Location History data using an interactive heatmap directly in your browser.">
		<link href="../css/style.css" rel="stylesheet">
		<link rel="stylesheet" href="index.css"/>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"/>
		</head>
		@@ -17,35 +20,38 @@
		<div id="intro" class="content-box">
		<h2>Location History Visualizer</h2>
		<div class="note">
		<strong>Note:</strong> This tool only generates heatmaps. If you're looking for minute-by-minute analysis of your Location History, including accuracy information, location-based search, advanced filtering and measurement tools, and more, check out <strong><a href="https://theopatt.com/lhv-pro">Location History Visualizer Pro</a></strong>.
		<strong>Note:</strong> This tool only generates heatmaps. If you're looking for minute-by-minute analysis of your Location History, including accuracy information, location-based search, advanced filtering and measurement tools, and more, check out <strong><a href="/">Location History Visualizer Pro</a></strong>.
		</div>
		<p>Welcome to <b>location-history-visualizer</b>, a tool for visualizing your collected Google <a href="https://google.com/locationhistory" target="_blank">Location History</a> data with heatmaps. <i>Don't worry—all processing and visualization happens directly on your computer, so rest assured that nobody is able to access your Location History but you... and Google, of course.</i> ^.^</p>
		<p>Welcome to <b>Location History Visualizer</b>, a tool for visualizing your collected Google <a href="https://google.com/locationhistory" target="_blank">Location History</a> data with heatmaps. <i>Don't worry—all processing and visualization happens directly on your computer, so rest assured that nobody is able to access your Location History but you... and Google, of course.</i></p>
		<p>To start off, you'll need to go to <a href="https://google.com/takeout" target="_blank">Google Takeout</a> to download your Location History data: on that page, deselect everything except Location History by clicking "Select none" and then reselecting "Location History". Then hit "Next" and, finally, click "Create archive". Once the archive has been created, click "Download". Unzip the downloaded file, and open the "Location History" folder within. <b>Then, drag and drop <i>LocationHistory.json</i> from inside that folder onto this page.</b> Let the visualization begin!</p>
		<p class="fallback">Alternatively, select your <b>LocationHistory.json</b> file directly: <input name="file" type="file" id="file"></input></p>
		<hr>
		<p><i>Experimental (even faster!) import method:</i> Instead of going through Google Takeout, simply browse to the <a href="https://maps.google.com/locationhistory/kml?startTime=0&endTime=9000000000000" target="_blank">Google Location History KML API endpoint</a>. A file (<b>history-12-31-1969.kml</b>) will be downloaded – just drag and drop it onto this page, and we're off! <i>Note:</i> This uses a non-public Google API and as such may cease to work at any point. Your mileage may vary.</p>
		<p class="credit">A project by <a href="https://theopolis.me" target="_blank">@theopolisme</a>. Made in 2014 in Memphis, Tennessee (updated 2015).</p>
		<p class="credit">An <a target="_blank" href="https://github.com/theopolisme/location-history-visualizer">open source</a> project by the makers of <a href="/">Location History Visualizer Pro</a>.</p>
		</div>

		<!-- Shown in interim while processing is in progress -->
		<div id="working" class="content-box hidden">
		<h2>Processing data...</h2>
		<div class="spinner">
		<div class="loading">
		<div class="bounce1"></div>
		<div class="bounce2"></div>
		<div class="bounce3"></div>
		</div>
		<p><span id="currentStatus">Waking up...</span></p>
		<p>This will take a while... sit back, get a cup of tea or something.</p>
		<p>This may take a while... sit back, get a cup of tea or something.</p>
		<p><i>Why does it take so long?</i> Depending on how long Google's been tracking your location, you may have hundreds of thousands of [latitude, longitude] pairs, every one of which must be loaded, analyzed, and plotted. That's a lot of dots.</p>
		</div>

		<!-- Content displayed once processing complete -->
		<div id="done" class="content-box hidden">
		<h2>Render complete!</h2>
		<p>Successfully processed <span id="numberProcessed"></span> data points to generate the heatmap. Click inside this box to dismiss it and start exploring...</p>
		<p><i>Zoom</i> by scrolling, double-clicking, or using the buttons in the upper lefthand corner. <i>Navigate</i> by clicking and dragging. Hover over the menu in the lower lefthand corner to customize the heatmap rendering.</p>
		<p class="credit">A project by <a href="http://theopolis.me" target="_blank">@theopolisme</a>. Made in 2014 in Memphis, Tennessee.</p>
		<p>Successfully processed <span id="numberProcessed">a lot of</span> data points to generate your heatmap. Please submit your email address to start exploring...</p>
		<div class="email-form">
		<input id="email" type="email" placeholder="Email address" />
		<button id="launch">Launch heatmap</button>
		</div>
		<p>Usage tips: <i>Zoom</i> by scrolling, double-clicking, or using the buttons in the upper lefthand corner. <i>Navigate</i> by clicking and dragging. Hover over the menu in the lower lefthand corner to customize the heatmap rendering.</p>
		<div class="disclaimer">By submitting your email address you agree to receive interesting communications from the Location History Visualizer team from time to time. If you're not interested, you can unsubscribe immediately.</div>
		<p class="credit">An <a target="_blank" href="https://github.com/theopolisme/location-history-visualizer">open source</a> project by the makers of <a href="/">Location History Visualizer Pro</a>.</p>
		</div>
		</div>
		</div>
		@@ -53,7 +59,7 @@
		<!-- Appear when heatmap is displayed -->
		<div id="controls">
		<div class="title">
		location-history-visualizer
		Location History Visualizer
		<span>(hover for additional controls)</span>
		</div>
		<div class="control-block">
		@@ -75,15 +81,6 @@
		<div class="control-block actions">
		<button id="reset">Reset to defaults</button>
		</div>
		<div class="support">
		<div>Find this useful? Buy me a cup of tea :)</div>
		<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
		<input type="hidden" name="cmd" value="_s-xclick">
		<input type="hidden" name="hosted_button_id" value="AGUH8EGVDADM8">
		<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
		<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
		</form>
		</div>
		</div>

		<!-- The map, populated by leaflet.js -->
		@@ -98,15 +95,16 @@
		<script src="lib/oboe-browser.min.js"></script>
		<script src="index.js"></script>

		<!-- Google Analytics -->
		<!-- BEGIN GOOGLE ANALYTICS -->
		<script>
		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){
		(i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

		ga('create', 'UA-55418641-1', 'auto');
		ga('create', 'UA-55418641-9', 'auto');
		ga('send', 'pageview');
		</script>
		<!-- END GOOGLE ANALYTICS -->
		</body>
		</html>

index.js

+32 −8

Original line number	Diff line number	Diff line
		@@ -43,8 +43,13 @@
		}

		function stageTwo ( file ) {
		// Google Analytics event - heatmap upload file
		ga('send', 'event', 'Heatmap', 'upload', undefined, file.size);

		heat = L.heatLayer( [], heatOptions ).addTo( map );

		var type;

		try {
		if ( /\.kml$/i.test( file.name ) ) {
		type = 'kml';
		@@ -55,12 +60,16 @@
		status( 'Something went wrong generating your map. Ensure you\'re uploading a Google Takeout JSON file that contains location data and try again, or create an issue on GitHub if the problem persists. ( error: ' + ex.message + ' )' );
		return;
		}

		// First, change tabs
		$( 'body' ).addClass( 'working' );
		$( '#intro' ).addClass( 'hidden' );
		$( '#working' ).removeClass( 'hidden' );

		var latlngs = [];

		var os = new oboe();

		os.node( 'locations.*', function ( location ) {
		var SCALAR_E7 = 0.0000001; // Since Google Takeout stores latlngs as integers
		if ( type === 'json' ) latlngs.push( [ location.latitudeE7 * SCALAR_E7, location.longitudeE7 * SCALAR_E7 ] );
		@@ -73,16 +82,20 @@
		stageThree( /* numberProcessed */ latlngs.length );

		} );

		var fileSize = prettySize( file.size );

		status( 'Preparing to import file ( ' + fileSize + ' )...' );

		// Now start working!
		if ( type === 'json' ) parseJSONFile( file, os );
		if ( type === 'kml' ) parseKMLFile( file );

		}

		function stageThree ( numberProcessed ) {
		// Google Analytics event - heatmap render
		ga('send', 'event', 'Heatmap', 'render', undefined, numberProcessed);

		var $done = $( '#done' );

		// Change tabs :D
		@@ -93,11 +106,21 @@
		// Update count
		$( '#numberProcessed' ).text( numberProcessed.toLocaleString() );

		// Fade away when clicked
		$done.one( 'click', function () {
		$( '#launch' ).click( function () {
		var $email = $( '#email' );
		if ( $email.is( ':valid' ) ) {
		$( this ).text( 'Launching... ' );
		$.post( '/heatmap/submit-email.php', {
		email: $email.val()
		} )
		.always( function () {
		$( 'body' ).addClass( 'map-active' );
		$done.fadeOut();
		activateControls();
		} );
		} else {
		alert( 'Please enter a valid email address to proceed.' );
		}
		} );

		function activateControls () {
		@@ -149,6 +172,7 @@

		function parseJSONFile( file, oboeInstance ) {
		var fileSize = file.size;
		var prettyFileSize = prettySize(fileSize);
		var chunkSize = 512 * 1024; // bytes
		var offset = 0;
		var self = this; // we need a reference to the current object
		@@ -160,7 +184,7 @@
		offset += evt.target.result.length;
		var chunk = evt.target.result;
		var percentLoaded = ( 100 * offset / fileSize ).toFixed( 0 );
		status( percentLoaded + '% of ' + fileSize + ' loaded...' );
		status( percentLoaded + '% of ' + prettyFileSize + ' loaded...' );
		oboeInstance.emit( 'data', chunk ); // callback for handling read chunk
		} else {
		return;