Merge branch 'master' into gh-pages (9e7b1542) · Commits · school / Capstone Design / 02 / location-history-visualizer

index.css

+73 −0

Original line number	Diff line number	Diff line
		@@ -3,6 +3,7 @@ body {
		margin: 0;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 14px;
		overflow: hidden;
		}

		html, body, #map {
		@@ -59,6 +60,11 @@ h2 {
		text-align: center;
		}

		.whats-new {
		font-size: 0.9em;
		text-align: center;
		}

		#working {
		text-align: center;
		}
		@@ -67,6 +73,73 @@ h2 {
		cursor: pointer;
		}

		#controls {
		z-index: 99999;
		position: absolute;
		overflow: hidden;
		bottom: -200px;
		left: 0px;
		margin: 0px 10px;
		padding: 3px 16px 5px;
		background-color: rgba(255,255,255,0.7);
		transition: all 0.5s ease-in-out;
		}

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

		#controls:hover {
		bottom: 0px;
		left: 0px;
		background-color: rgba(255,255,255,0.9);
		}

		#controls:hover .title span {
		opacity: 0;
		}

		#controls .title {
		text-align: center;
		font-weight: bold;
		line-height: 1.4;
		font-size: 13px;
		padding-bottom: 3px;
		}

		#controls .title span {
		display: block;
		line-height: 0.9;
		font-weight: lighter;
		font-size: 11px;
		transition: all 0.5s ease-in-out;
		}

		#controls .control-block {
		height: 20px;
		}

		#controls .control-block input {
		float: right;
		margin-left: 10px;
		}

		#controls .actions {
		text-align: center;
		}

		#controls .support {
		border-top: 1px dashed black;
		margin-top: 10px;
		padding-top: 10px;
		font-size: 0.8em;
		text-align: center;
		}

		#controls .support div {
		padding-bottom: 5px;
		}

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

		.spinner {

index.html

+30 −2

Original line number	Diff line number	Diff line
		@@ -16,7 +16,8 @@
		<!-- Intro, before data has been uploaded -->
		<div id="intro" class="content-box">
		<h2>location-history-visualizer</h2>
		<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. <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 class="whats-new"><b>What's new:</b> 1000x faster processing time, heatmap controls, and more!</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>
		<p class="credit">A project by <a href="https://github.com/theopolisme" target="_blank">@theopolisme</a>. Made in 2014 in Memphis, Tennessee.</p>
		@@ -46,6 +47,33 @@
		</div>
		</div>

		<div id="controls">
		<div class="title">
		location-history-visualizer
		<span>(hover for additional controls)</span>
		</div>
		<div class="control-block">
		<label>Point radius</label>
		<input type="range" min="1" max="30" id="radius" class="control">
		</div>
		<div class="control-block">
		<label>Blur radius</label>
		<input type="range" min="1" max="25" id="blur" class="control">
		</div>
		<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>

		<div id="map"></div>

		<!-- dropzone, outta here! -->
		@@ -55,7 +83,7 @@
		<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/3.8.4/dropzone.min.js"></script>
		<script src="lib/leaflet.heat.min.js"></script>
		<script src="lib/stream.js"></script>
		<script src="lib/prettysize.js"></script>
		<script src="index.js"></script>

		<!-- Google Analytics -->

index.js

+62 −33

Original line number	Diff line number	Diff line
		( function ( $, L, oboe, FileReadStream, prettySize ) {
		var map;
		( function ( $, L, prettySize ) {
		var map, heat,
		heatOptions = {
		radius: 25,
		blur: 15
		};

		// Start at the beginning
		stageOne();
		@@ -13,7 +17,8 @@
		map = L.map( 'map' ).setView([0,0], 2);
		L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: 'location-history-visualizer is open source and available <a href="https://github.com/theopolisme/location-history-visualizer">on GitHub</a>. Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors.',
		maxZoom: 18
		maxZoom: 18,
		minZoom: 2
		} ).addTo( map );

		// Initialize the dropzone
		@@ -37,9 +42,7 @@
		////// STAGE 2 - ZE PROCESSING //////

		function stageTwo ( file ) {
		var heat = L.heatLayer( [], {
		blur: 20
		} ).addTo( map ),
		heat = L.heatLayer( [], heatOptions ).addTo( map ),
		SCALAR_E7 = 0.0000001; // Since Google Takeout stores latlngs as integers

		// First, change tabs
		@@ -55,36 +58,36 @@
		}

		function processFile ( file ) {
		var pointNo = 0,
		fileSize = prettySize( file.size ),
		filestream = new FileReadStream( file );
		var fileSize = prettySize( file.size ),
		reader = new FileReader();

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

		oboe( filestream )
		.on( 'node', {
		'locations.*': function ( location ) {
		// Add the new point... prevent lots of redraws by writing to _latlngs
		pointNo += 1;
		status( 'Adding point #' + pointNo.toLocaleString() + ' (' + prettySize( filestream._offset ) + ' / ' + fileSize + ')' );
		heat._latlngs.push( [ location.latitudeE7 * SCALAR_E7, location.longitudeE7 * SCALAR_E7 ] );
		},
		'locations': function () {
		// Don't need any other data now
		this.abort();
		// Also, trigger the next step :D
		renderMap();
		}
		} )
		.on( 'fail', function () {
		status( 'Something went wrong reading your JSON file. Ensure you\'re uploading a "direct-from-Google" JSON file and try again, or create an issue on GitHub if the problem persists.' );
		reader.onprogress = function ( e ) {
		var percentLoaded = Math.round( ( e.loaded / e.total ) * 100 );
		status( percentLoaded + '% of ' + fileSize + ' loaded...' );
		};

		reader.onload = function ( e ) {
		var locations;

		status( 'Generating map...' );

		locations = JSON.parse( e.target.result ).locations;

		heat._latlngs = locations.map( function ( location ) {
		return [ location.latitudeE7 * SCALAR_E7, location.longitudeE7 * SCALAR_E7 ];
		} );

		function renderMap () {
		heat.redraw();
		// Stage 3!
		stageThree( /* numberProcessed */ pointNo );
		}
		stageThree( /* numberProcessed */ locations.length );
		};

		reader.onerror = function () {
		status( 'Something went wrong reading your JSON file. Ensure you\'re uploading a "direct-from-Google" JSON file and try again, or create an issue on GitHub if the problem persists. (error: ' + reader.error + ')' );
		};

		reader.readAsText( file );
		}
		}

		@@ -105,7 +108,33 @@
		$done.one( 'click', function () {
		$( 'body' ).addClass( 'map-active' );
		$done.fadeOut();
		activateControls();
		} );

		function activateControls () {
		var option,
		originalHeatOptions = $.extend( {}, heatOptions ); // for reset

		// Update values of the dom elements
		function updateInputs () {
		for ( option in heatOptions ) {
		document.getElementById( option ).value = heatOptions[option];
		};
		}

		updateInputs();

		$( '.control' ).change( function () {
		heatOptions[ this.id ] = Number( this.value );
		heat.setOptions( heatOptions );
		} );

		$( '#reset' ).click( function () {
		$.extend( heatOptions, originalHeatOptions );
		updateInputs();
		heat.setOptions( heatOptions );
		} );
		}
		}

		}( jQuery, L, oboe, FileReadStream, prettySize ) );
		}( jQuery, L, prettySize ) );

lib/prettysize.js

0 → 100644

+2 −0

/* https://github.com/davglass/prettysize */

(function(){var sizes=["Bytes","kB","MB","GB","TB","PB","EB"];window.prettySize=function(e,s,i){var t,n;return sizes.forEach(function(n,o){i&&(n=n.slice(0,1));var r,B=Math.pow(1024,o);B>e||(r=(e/B).toFixed(1)+"",r.indexOf(".0")===r.length-2&&(r=r.slice(0,-2)),t=r+(s?"":" ")+n)}),t||(n=i?sizes[0].slice(0,1):sizes[0],t="0"+(s?"":" ")+n),t};}());

 No newline at end of file

lib/stream.js

deleted100644 → 0

+0 −714

File deleted.

Preview size limit exceeded, changes collapsed.