Add control panel for changing point radius and blur radius, plus a "What's new" line (a738dea2) · 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

+28 −0

Original line number	Diff line number	Diff line
		@@ -16,6 +16,7 @@
		<!-- Intro, before data has been uploaded -->
		<div id="intro" class="content-box">
		<h2>location-history-visualizer</h2>
		<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>
		@@ -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! -->

index.js

+32 −3

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

		// Start at the beginning
		stageOne();
		@@ -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
		@@ -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, prettySize ) );